jQuery選項卡：禁用窗口位置哈希

我有一個小片段，它將您從一個選項卡移動到另一個選項卡。jQuery選項卡：禁用窗口位置哈希

的HTML看起來像這樣：

<ul id="tabs"> 
    <a href="#tab1">General Settings</a> 
    <a href="#tab2">Keyboard Shortcuts</a> 
    <a href="#tab3">Regional Settings</a> 
    <a href="#tab4">Reset to Defaults</a> 
</ul> 

<div id="tab1" class="hide">This is tab 1</div> 
<div id="tab2" class="hide">his is tab 2</div> 
<div id="tab3" class="hide">his is tab 3</div> 
<div id="tab4" class="hide">his is tab 4</div>

和jQuery的是這樣的：

$('#tabs a').live('click',function(e){ 
    var a = $(this).attr('href').split('#')[1]; 
      $('div.hide:not(#' + a + ')').hide(); 
      $('#' + a).fadeIn(); 

    });

現在我想這樣他們就不會在地址欄顯示爲禁用哈希標籤。

例子：http://jsfiddle.net/HSJHp/show

這裏是the fiddle

來源

2011-12-23 jQuerybeast

嘗試這樣的事情......

的HTML看起來像這樣：

<ul id="tabs"> 
    <a href="" id="tablink1">General Settings</a> 
    <a href="" id="tablink2">Keyboard Shortcuts</a> 
    <a href="" id="tablink3">Regional Settings</a> 
    <a href="" id="tablink4">Reset to Defaults</a> 
</ul> 

<div id="tab1" class="hide">This is tab 1</div> 
<div id="tab2" class="hide">his is tab 2</div> 
<div id="tab3" class="hide">his is tab 3</div> 
<div id="tab4" class="hide">his is tab 4</div>

和jQuery的是這樣的：

$('#tabs a').live('click',function(e){ 
e.preventDefault(); 
var a = $(this).attr('id').split('tablink')[1]; 
console.log(a) 
     $('div.hide:not(#tab' + a + ')').hide(); 
     $('#tab' + a).fadeIn(); 
});

來源

2011-12-23 06:10:59 tamilsweet

謝謝。很棒！ – jQuerybeast 2011-12-23 06:20:42

-1

從我從你的問題和代碼明白你想實現標籤。您可以使用jQueryUI輕鬆實現選項卡。這是它的鏈接。 http://jqueryui.com/demos/tabs/

更新：這是基於你已經實施了什麼解決方案。在您的解決方案中，您不在ul標籤內使用li標籤。所以這將導致無效的HTML，並可能導致不同瀏覽器中的問題。這是帶有有效html的更新代碼。 http://jsfiddle.net/byeGu/

來源

2011-12-23 06:10:18 Virendra

標籤做工精細先生 – jQuerybeast 2011-12-23 06:19:06

@jQuerybeast你應該只downvote如果給出的答案是明確錯誤的，不只是如果它不會給你你所追求的答案。它也會對你的聲譽產生負面影響，所以你只能用它來做'壞'的答案。我會刪除我的，取悅你。 – isNaN1247 2011-12-23 06:28:30

@jQuerybeast我不知道你爲什麼低估了我的答案。無論如何，讓我知道如果你不想使用jqueryUI選項卡，我可以幫助你的方法。 – Virendra 2011-12-23 06:41:59

你真的想用href？如果你不這樣做，這可以這樣

$(".tab-content").hide().filter(":eq(" + $(this).index() + ")").fadeIn();

實現觀看演示：http://jsfiddle.net/diode/mcQpF/1/

來源

2011-12-23 06:25:37 Diode

jQuery選項卡：禁用窗口位置哈希

回答

相關問題