使用#href使用div ID交换画廊图像时如何防止页面跳转？

Question

我一直在为一个问题苦苦挣扎。我使用 CSS 和 # href 制作了一个简单的 html 画廊，以从本质上换出包含画廊图像的不同 div ID。问题是，当您在图库中选择“下一个”或“上一个”按钮时，它会在浏览器中向上跳转页面，因此图库与页面顶部对齐。有人知道如何防止这种情况吗？

画廊的代码如下所示：

<div id="pic1">
<img src="click/pic1.jpg" alt="" />
<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
</div>
<div id="pic2">
<img src="click/pic2.jpg" alt="" />
<a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"> <b>Next</b></a>
</div>
<div id="pic3">
<img src="click/pic3.jpg" alt="" />
<a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
</div>
<div id="pic4">
<img src="click/pic4.jpg" alt="" />
<a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5">  <b>Next</b></a>
</div>
<div id="pic5">
<img src="click/pic5.jpg" alt="" />
<a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
</div>
<div id="pic6">
<img src="click/pic6.jpg" alt="" />
<a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
</div>
<div id="pic7">
<img src="click/pic7.jpg" alt="" />
<a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
</div>
<div id="pic8">
<img src="click/pic8.jpg" alt="" />
<a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
</div>
<div id="pic9">
<img src="click/pic9.jpg" alt="" />
<a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
</div>
<div id="pic10">
<img src="click/pic10.jpg" alt="" />
<a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1">  <b>Next</b></a>
</div>

任何帮助将不胜感激！

Answer 1

不是链接到#，而是链接到javascript:void(0);

<a class="previous" href="javascript:void(0);">Next</a>

或者，使用 Javascript 阻止默认事件

$("a.previous, a.next").on("click", function(e) {
   e.preventDefault();
});

Answer 2

设置后需要使用JQuery

<a class="previous" href="javascript:void(0);">Next</a>

然后调用JS：

$(document).ready(function(){

    $('a.previous').click(function(e){
        var picID= parseInt($(this).parent().attr("id").substr(3));//gets the pic id count
        $("#pic"+(picID)).hide(); //hide the current div
        $("#pic"+(picID-1)).show(); //show the previous div
    });

    $('a.next').click(function(e){
        var picID= parseInt($(this).parent().attr("id").substr(3)); //gets the pic id count
        $("#pic"+(picID)).hide(); //hide the current div
        $("#pic"+(picID+1)).show(); //show the previous div
    });

});

见：http://jsfiddle.net/uZ6g5/