jquery - 使用 jQuery 实现选项卡功能，除了 jQuery 本身之外，无需任何其他库

Question

HTML 代码:

  <ul class="toggler">
    <li><h2 class="heading-title"><a id="blog-toggler" class="inactive" href="#">Блог</a></h2></li>
    <li><h2 class="heading-title"><a id="wall-toggler" href="#">Стена</a></h2></li>
  </ul>

jQuery 代码:

if ($('#wall-toggler').hasClass('inactive')) {
    $('#wall-toggler').click(function() {
        $(this).removeClass('inactive');
        $('.group-wall').show();
        $('.group-blogs').hide();
        $('#blog-toggler').addClass('inactive');
        return false;
    });
} else {
    $('#wall-toggler').click(function(){
        return false;
    });
}


if ($('#blog-toggler').hasClass('inactive')) {
    $('#blog-toggler').click(function() {
        $(this).removeClass('inactive');
        $('.group-blogs').show(); // show the blog div
        $('.group-wall').hide(); // hide the wall div
        $('#wall-toggler').addClass('inactive');
        return false;
    });
} else {
    $('#blog-toggler').click(function(){
        return false;
    });
}

当我点击 #blog-toggler 时，一切都按预期工作，但是当点击 #blog-toggler 后，我试图点击 #wall-toggler -> 没有任何反应，问题就开始了。我做错了什么？提前致谢。

现场演示:http://test.terra9.kz/group/brrrrrrrr-dva-tri-chetyre#

看一下按钮:“Блог”、“Стена”

Answer 1

试试这个:

HTML

对于实际的选项卡，我们将使用无序列表。 HTML 代码非常简单。

<div id="tabs_container">
    <ul id="tabs">
        <li class="active"><a href="#tab1">Tab 1</a></li>
        <li><a class="icon_accept" href="#tab2">Tab with icon</a></li>
        <li><a href="#tab3">Long name for the last tab</a></li>
    </ul>
</div>

“icon_accept”类是包含图标的类。现在，如果您希望为每个选项卡添加不同的图标，则需要为每个图标创建新类并将其添加到选项卡中。

以及内容 DIV 的 HTML。

<div id="tabs_content_container">
    <div id="tab1" class="tab_content" style="display: block;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
    </div>
    <div id="tab2" class="tab_content">
        <p>This tab has icon in it.</p>
    </div>
    <div id="tab3" class="tab_content">
        <p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
    </div>
</div>

jQuery

jQuery 代码非常简单。

$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $("#tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //  Hide all tab content
        $(".tab_content").hide();

        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //  Show the selected tab content
        $(selected_tab).fadeIn();

        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});

<强> FIDDLE HERE 就是这样:)