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

Answer 2

我会使用ajax调用。将变量发送到您的PHP脚本。然后获取响应，并使用jquery交换数据。 ajax到php的快速示例。所以让php回显html块。

$.ajax({
    "url": "./path-to-php.php",
    "type": "GET",
    "dataType": "html",
    "data": {"side": "forside"},
    success: function(data){
        $("#forside").html(data);
    },
    error: function(xhr, status, error){
        console.log(error);
    }
});

Answer 3

你试过jquery这样做吗？只更改attr src

如果单击图片，我会为一个元素执行此操作。您可以复制所有div并将事件放在按钮上

$(document).on("click", "#imgTest", function(e){
        e.preventDefault();
      $(this).attr("src","http://i639.photobucket.com/albums/uu112/mich36/Tropical-Breeze.jpg");

    });

请参阅fidlle http://jsfiddle.net/87bmncex/

动态切换div内容，php没有为我做

3 个答案: