0

私はしばらくの間、問題に苦しんでいます。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>

どんな助けでも大歓迎です！

4

2 に答える 2

1

# にリンクする代わりに、javascript:void(0); にリンクします。

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

または、Javascript でデフォルトのイベントを防止する

$("a.previous, a.next").on("click", function(e) {
   e.preventDefault();
});
于 2012-08-20T22:43:05.383 に答える
0

設定後、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/

于 2012-08-21T17:26:11.123 に答える