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选项卡：禁用窗口位置哈希

回答

相关问题