javascript - 即时切换 div 内容，php 没有为我做这件事

Question

我正在寻找一种动态切换内容的好方法，我尝试使用 php 开关，它起作用了，但问题是当开关被激活时，页面被重新加载到顶部，而不是停留在顶部内容切换的地方。

我想实现的画廊效果是可以使用一些按钮切换组图像。

例如我想要一个切换这个组的按钮:

<div class="galleryimg img1">
</div>
<div class="galleryimg img2">
</div>
<div class="galleryimg img3">
</div>
<div class="galleryimg img4">
</div>

和这样的另一组:

<div class="galleryimg img5">
</div>
<div class="galleryimg img6">
</div>
<div class="galleryimg img7">
</div>
<div class="galleryimg img8">
</div>

我说过我是用 php 实现的，但是页面重新加载到顶部，所以这不是一个选项。

这是我使用的 php，只是再次快速重新输入，没有检查拼写错误:

<a href="index.php?side=forside">forside</a><a href="index.php?side=side2">side2</a>

<?php
    $side=$_GET['side'];

    if(empty($side)){
        $side='forside';
    }else{
        $side=$side;
    }
?>

<?php
    switch($side){
        case 'forside':
        include('php/forside.php');
        break;

        case 'side2':
        include('php/side2.php');
        break;

        default:
        include('php/forside.php');
        break;
    }
?>

还有什么好的建议。

谢谢;)

Answer 1

你的 switch说法不正确。尝试:

switch($side){
    case 'forside':// Colon instead of semicolon
    include('incs/forside.php');
    break;

    case 'side2':// Colon instead of semicolon
    include('incs/side2.php');
    break;// Break to avoid executing `default` part

    default:// Colon instead of semicolon
    include('incs/forside.php');
    break;
}

更新

打印所有内容，使用 jquery 或 javascript 隐藏您不想显示的内容，当用户单击链接时，切换内容。这可以作为草图:

$(document).ready(function() {
    $("#side2").hide(); // Hide side2 to start off

    $("#foreside_c").click(function (ev) {// Click on link, hide one show other.
        ev.preventDefault();
        $("#side2").hide();
        $("#foreside").show();
    });

    $("#side2_c").click(function (ev) {// Click on link, hide one show other.
        ev.preventDefault();
        $("#foreside").hide();
        $("#side2").show();
    });
});

Fiddle