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

    });

现在我想禁用哈希标记，这样它们就不会出现在URL栏中。

示例：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/

jQuery选项卡：禁用窗口位置哈希

3 个答案: