jQuery选项卡:禁用窗口位置散列

Question

我有一个小片段，它会将你从一个标签页带到另一个标签页。

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

Answer 1

试试这样的..。

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();
});

Answer 2

你真的想使用href吗？如果您不这样做，可以像这样实现

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

查看演示：http://jsfiddle.net/diode/mcQpF/1/

Answer 3

根据我对您的问题和代码的理解，您正在尝试实现Tabs。您可以使用jQueryUI轻松地实现选项卡。这是它的链接。http://jqueryui.com/demos/tabs/

更新：这是一个基于您实现的解决方案。在您的解决方案中，您没有在ul标记中使用li标记。因此这将导致无效的html，并可能在不同的浏览器中引起问题。下面是使用有效html更新后的代码。http://jsfiddle.net/byeGu/