Question

我无法让这个jQuery工作。我在div中有一个段落。单击div选项卡/按钮时，我希望它隐藏（）段落。当按下相反的div选项卡/按钮时，我想显示（）它。

$("#details").on("click", function () {
    $(".cont").hide();
    $("#content").text("some text");
});
$("#description").on("click", function () {
    $("#content").empty();
    $("p.cont").show();
});

}）;

Answer 1

你可能更容易使用JQuery插件而不是自己编写代码。

JQuery UI非常适合这类内容，请参阅此处的标签部分：

http://jqueryui.com/tabs/

因为你只需要Tabs，你可以在这里自定义下载它，这将减少你在页面上加载的代码量：

http://jqueryui.com/download/#!version=1.10.3&components=1100000000000000001000000000000000

Answer 2

你没有看到任何东西，因为你正在清空#content div，然后试图展示它的孩子：

$("#content").empty();

将清除选择器内的任何内容。所以快速console.log($("p.cont").length)为0，因为你已经清除了它。只需更改文本或不要清空它。

Answer 3

如果您最终选择编写自己的选项卡脚本，即使使用Jquery，也有很多方法可以解决问题。这是一种方式：

（http://jsfiddle.net/ruqmU/5/）

<强> CSS

.tab {
    float:left;
    display:inline-block;
    border:1px solid #000;
    padding:.5em;
}
#contentArea {
    border: 1px solid #000;
    padding:.5em;
    clear: both;
}
.block {display:block;}
.hide {display:none;}
.selectedTab {background-color:red;}

Javascript（Jquery）

$(document).ready(function() {
    // default first tab to visible
    $('.content').addClass('hide');
    $('.content').first().removeClass('hide').addClass('block');
    $('.tab').first().addClass('selectedTab');

    // on click, hide all content except content matching the clicked tab
    $('.tab').click(function() {
        if(!$(this).hasClass('selectedTab')) {
            var tabContentType = $(this).children('p').attr('class');
            $('.tab').removeClass('selectedTab');
            $(this).addClass('selectedTab');
            $('div.content').addClass('hide');
            $( '.' + tabContentType ).parent().removeClass('hide').addClass('block');
        }
    });
});

<强> HTML

<div id="tabArea">
    <div class="tab">
        <p class="details">details</p>
    </div>
    <div class="tab">
        <p class="description">description</p>
    </div>
</div>
<div id="contentArea">
    <div class="content">
        <p class="details">details go here</p>
    </div>
    <div class="content">
        <p class="description">description goes here</p>
    </div>
</div>

jQuery hide / show / toggle / empty

3 个答案: