1

jqueryタブ付きコンテンツ内のアンカーをリンクしようとしています。動作するようになりましたが、タブをクリックすると、ページがタブコンテンツdivの上部にジャンプし、タブが切断されます。タブをクリックしてもスクロールせずに同じ場所にとどまりたいです。また、URLから各タブと内部アンカーにアクセスする必要があります。タブコンテンツdivの先頭にジャンプせず、上部のタブを切り取るには、タブURLが必要です。例： http： //mysite.com/test#tab1

これが私がこれまでに持っているものです：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$('a.refresh').live("click", function() {
      location.reload();
});
 });
</script>

<section class="wrap">

<div class="tablist">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>

</ul>
</div>
<div class="panes">
<div id="tab1" class="tab-content">
Tab 1 content
<br />
<a name="anchor1" id="anchor1">Anchor 1</a>
</div>

<div id="tab2" class="tab-content">
Tab 2 content
</div>

<div id="tab3" class="tab-content">
Tab 3 content
<br />
<a name="anchor2" id="anchor2">Anchor 2</a>
</div>

</div>
</section>

<script type="text/javascript">
$(document).ready(function() {
var $tabContent = $(".tab-content"),
    $tabs = $("ul.tabs li"),
    tabId;

$tabContent.hide();
$("ul.tabs li:first").addClass("current").show();
$tabContent.first().show();

$tabs.click(function() {
    var $this = $(this);
    $tabs.removeClass("current");
    $this.addClass("current");
    $tabContent.hide();
    var activeTab = $this.find("a").attr("href");
    $(activeTab).fadeIn();

});

// Grab the ID of the .tab-content that the hash is referring to
tabId = $(window.location.hash).closest('.tab-content').attr('id');

// Find the anchor element to "click", and click it
$tabs.find('a[href=#' + tabId + ']').click();
 })

$('a').not('.tabs li a').on('click', function(evt) {
evt.preventDefault();
var whereTo = $(this).attr('goto');
$tabs = $("ul.tabs li");
$tabs.find('a[href=#' + whereTo + ']').trigger('click');

$('html, body').animate({
    scrollTop: $('#'+whereTo+' a').offset().top });


 });
 </script>

どんな考え、アイデア、または助けも大歓迎です！

ありがとう！

4

1 に答える 1

1

デフォルトの動作を停止するには、これをイベントに追加する必要があります

preventDefault();

ドキュメントを参照してください

したがって、その動作を停止する必要があるアンカータグの場合

$('#yourselector').click(function(e){
    e.preventDefault();
});
于 2012-08-27T16:02:17.500 に答える