1

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#

看看按钮：“Блог”、“Стена”

4

2 回答 2

5

试试这个：

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

在这里提琴就是这样:)

于 2012-12-20T14:05:07.963 回答
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();
    });
});
于 2012-12-20T13:59:22.903 回答