1

我无法添加几个 jquery-ui 选项卡。目前，点击Field0某些信息后会消失，Field3反之亦然。

我想单击Field0或Field1仅对这些字段应用更改。Field3并且Field4不响应任何事件。我使用 document.on 作为代码的一部分是动态下载的。

我的代码：http: //jsfiddle.net/scopex/muXCu

$(document).ready(function() {
    $(document).on("click", "ul.tabs a", function() {

        $("ul.tabs li").removeClass('active');
        $(this).parent().addClass('active');
        var classname = $(this).attr("class");
        $(".pane div").hide();
        $($(this).attr("href")).show();
        return false;
    });
})
4

2 回答 2

1

您需要进行更改$(".pane div").hide()，以便仅隐藏与选项卡关联的窗格的兄弟姐妹。

你可以试试这个：

$(document).on("click", "ul.tabs a", function () {
    var $link = $(this),
        $pane = $($link.attr("href"));
    $link.removeClass('active').parent().addClass('active');
    $pane.show().siblings().hide();
    return false;
});
于 2013-04-03T16:05:24.727 回答
0

这是你想要的？

我用我认为你想要的东西来解决它。让我知道这是否有帮助。

我所做的是向每个 div 容器添加一个 id 属性，将 div 标识为单独的存在。然后我只在点击的 div 上调用了 switch 方法。

http://jsfiddle.net/YLbAj/

<div class="tabs" id="one">
<ul class="tabs">
<li><a href="#tab0_0">Field0</a></li>
<li><a href="#tab0_1">Field1</a></li>
</ul>
</div>
<div class="pane" id="onePane">
    <div id="tab0_0">Field 0</div>
    <div id="tab0_1">Field 1</div>
</div>

<br />

<div class="tabs" id="two">
    <ul class="tabs">
        <li><a href="#tab0_2">Field2</a></li>
        <li><a href="#tab0_3">Field3</a></li>
    </ul>
</div>
<div class="pane" id="twoPane">
    <div id="tab0_2">Field 2</div>
    <div id="tab0_3">Field 3</div>
</div>

$(document).ready(function() {
    $(document).on("click", "ul.tabs li a", function() {
        var whichPane = $(this).parents().eq(2).attr('id');
        $("ul.tabs li").removeClass('active');
        $(this).parent().addClass('active');
        var classname = $(this).attr("class");
        $("#" + whichPane + "Pane div").hide();
        $($(this).attr("href")).show();
        return false;
    });
    })
于 2013-04-03T16:14:34.230 回答