Question

HTML CODE：

  <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 - ＆gt;什么都没发生。我做错了什么？提前谢谢。

现场演示：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 就是这样:)）

Answer 2

尝试类似

的内容

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
    <p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
    <p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
    <p>And this is the 3rd tab.</p>
</div>

jquery的

$('ul.tabs').each(function(){

    var $active, $content, $links = $(this).find('a');
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active.attr('href'));

    // Hide the remaining content
    $links.not($active).each(function () {
        $($(this).attr('href')).hide();
    });

    $(this).on('click', 'a', function(e){
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        $active = $(this);
        $content = $($(this).attr('href'));

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        // Prevent the anchor's default click action
        e.preventDefault();
    });
});

使用jQuery制作标签功能，而不使用任何其他库而不是jQuery本身

2 个答案: