jquery選項卡哈希標記問題

目前我有一個非常簡單的選項卡系統設置，問題是當你點擊標籤的頁面向上移動，但不是所有的方式到頂部。我試過返回false;和e.preventDefault（）;在我的點擊事件。這些似乎都沒有工作。如果任何人可以幫助我停止頁面移動時，單擊一個標籤，這將是偉大的。這裏是我的代碼，也知道我只有e.preventDefault（）;在我的單擊事件，但我也試圖返回假太：jquery選項卡哈希標記問題

$(".tab_content").hide(); 
$(".bat-tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 
$("#nav-container").css("border-top", "3px solid #F79C0C"); 

$(".bat-tabs li > a").click(function (e) { 
    $(".bat-tabs li").removeClass("active"); 
    $(this).parent().addClass("active"); 
    $(".tab_content").hide(); 

    var activeTab = $(this).attr("href"); 
    $(activeTab).fadeIn(); 
    e.preventDefault(); 

});

這是我真正的HTML

Thank you guys for both responding so quickly. For jbrookover: not sure how i should implement your solution bc right now for each one of my links i have a corresponding #+('tab name'), like this:        {  <div class="clearfix"> 
    <ul class="bat-tabs clearfix"> 
     <li><a href="#baseball" title="click to see all our choices for baseball bats" class="active"><h2>Baseball Bats</h2></a></li> 
     <li><a href="#fast" title="click to see all our choices for fastpitch bats"><h2>Fastpitch Bats</h2></a></li> 
     <li><a href="#slow" title="click to see all our choices for slowpitch bats"><h2>Slow Pitch Bats</h2></a></li> 
    </ul> 
</div> 
<div id="nav-container" class="section clearfix nav"> 
    <div id="baseball" class="tab_content"> 
     content here 
    </div> 
    <div id="fast" class="tab_content"> 
     content here 
    </div> 
    <div id="slow" class="tab_content"> 
     content here 
    </div> 
</div>                   }

來源

2011-04-07 Lawrence

如果出現以下情況，您將在URL中看到＃作爲最後一個參數：a）jquery腳本尚未加載。 b）腳本本身有問題。你有螢火蟲嗎？ – arma 2011-04-07 18:37:44

對不起，要求愚蠢的問題，但仍然是非常新的jquery，是的，我有螢火蟲，但我通常只使用控制檯在鉻 – Lawrence 2011-04-07 18:45:07

也＃那些＃是不是在 – Lawrence 2011-04-07 18:45:36

問題無關使用哈希標記或javascript：void（0）。問題是你隱藏一個div，然後顯示另一個div。一段時間之間沒有顯示任何內容，因此您的頁面長度會縮短，當再次展開高度時，使滾動條看起來向上移動。

你想要做的是將標籤容器的高度設置爲隱藏之前標籤高度。

編輯：這裏的東西更接近你的實際執行情況：

$(".bat-tabs li > a").click(function (e) { 
    //set the height of the container 
    $('#nav-container').css({'height': $("#nav-container").height(), 'overflow': 'hidden'}); 

    //your own logic for hiding/showing a new tab 
    $(".bat-tabs li").removeClass("active"); 
    $(this).parent().addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).attr("href"); 
    $(activeTab).fadeIn(); 

    //set the height of the container back to auto. 
    $('#nav-container').css({'height': 'auto', 'overflow': 'visible'}); 

    e.preventDefault(); 
});

來源

2011-04-07 18:47:25

所以，爲了澄清一下，我會這樣設置：$（'＃nav-container'）.css （{'height'：activeTab.height（）+'px'}）; $（「。bat-tabs li：first」）。addClass（「active」）。show（）; $（「。tab_content：first 「）.show（）; $（'＃nav-container'）.css（{'height'：'auto'}）; – Lawrence 2011-04-07 18:51:27

Be su在設置高度後重新隱藏標籤。因此，將容器的高度設置爲活動選項卡的高度，隱藏活動選項卡，顯示新選項卡，將高度設置爲自動。 – 2011-04-07 18:53:22

好吧，想要嘗試所有這些解決方案，讓這些解決方案得到如此多的迴應，只是這麼新而已，所以試圖慢下來。 – Lawrence 2011-04-07 18:59:57

這與您的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
    $(".tab_content").hide(); 
    $(".bat-tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 
    $("#nav-container").css("border-top", "3px solid #F79C0C"); 

    $(".bat-tabs li > a").click(function (e) { 
     $(".bat-tabs li").removeClass("active"); 
     $(this).parent().addClass("active"); 
     $(".tab_content").hide(); 

     var activeTab = $(this).attr("href"); 
     $(activeTab).fadeIn(); 
     e.preventDefault(); 

    }); 
});

來源

2011-04-07 18:46:40 arma

正如我所說的代碼工作1.4.4和1.5.2在Chrome和FF中都很好，所以也許你的js文件不是它應該在的地方？ – arma 2011-04-07 18:51:37

-1

你並不真的需要在鏈接的ID，你可以做到這一點。 click()事件實際上傳遞了該元素。

下面是一個example on jsfiddle

如果您有任何其他問題，請隨時提出意見，我們會解決。

來源

2011-04-07 18:56:35 Khez

jquery選項卡哈希標記問題

回答

相關問題