Question

我想知道如何改进此代码？导航中有3个菜单按钮。第一个默认是活动的。单击时，其他按钮将分配活动类。

<div class="mobile-nav">
    <ul>
        <li><input class="mobile-nav-tab active" id="search-tab" type="button"/></li>
        <li><input class="mobile-nav-tab" id="menu-tab" type="button"/></li>
        <li><input class="mobile-nav-tab" id="members-tab" type="button"/></li>
    </ul>
</div>

这些按钮中的每一个都会显示某个div并隐藏其他按钮。

<div class="mobile-nav-content">
    <div id="search">

    </div>
    <div style="display:none" id="menu">
        <br>menu
        <br>menu
    </div>
    <div style="display:none" id="members">
        <br>members
        <br>members
    </div>
</div>

我有这个代码，它工作正常。

$(document).ready(function(){
    $('.mobile-nav-tab').click(function(){
        $('.mobile-nav-tab').removeClass('active');
        $(this).addClass('active');
        if ($('#search-tab').hasClass('active')){
            $('#search').slideDown();
        }
        else{
            $('#search').hide();
        }
        if ($('#menu-tab').hasClass('active')){
            $('#menu').slideDown();
        }
        else{
            $('#menu').hide();
        }
        if ($('#members-tab').hasClass('active')){
            $('#members').slideDown();
        }
        else{
            $('#members').hide();
        }
    });
});

我发现我可以使用三元运算符来缩写if-else部分。但我想知道还有其他方法可以改进它并缩短它吗？

Answer 1

这应该会大大缩短它：

$(".mobile-nav-tab").click(function() {
    var parts = this.id.split("-");
    $(".mobile-nav-content").children().slideUp();

    $('.mobile-nav-tab').removeClass('active');
    $(this).addClass("active");
    $("#" + parts[0]).slideDown();
});

Answer 2

简单地循环各种标题：

$(document).ready(function(){
    $('.mobile-nav-tab').click(function(){
        $('.mobile-nav-tab').removeClass('active');
        $(this).addClass('active');
        var a=["search","menu","members"]
        for (i in a){
         if ($('#'+a[i]+'-tab').hasClass('active')){
            $('#'+a[i]).slideDown();
         }
         else{
            $('#'+ a[i]).hide();
         }
        }
    });
});

或者，这样做：

$(document).ready(function(){
    $('.mobile-nav-tab').click(function(){
        $('.mobile-nav-tab').removeClass('active');
        $(this).addClass('active');
        $('.mobile-nav-content div').hide() //Hide all content divs
        $('#'+this.id.split('-')[0]).slideDown() //SlideDown the current div only
    });
});

Answer 3

我认为你可以清理它：

$('.mobile-nav-tab').click(function(){
        $('.mobile-nav-tab').removeClass('active');
        $(this).addClass('active');
        var $activeContent = $('#' + $(this).attr('id').replace('-tab',''));
         $('.mobile-nav-tab>div').not($activeContent).hide();
        $activeContent.slideDown();
});

Answer 4

$('.mobile-nav-tab').on("click", function () {
    clickedId = $(this).attr("id");
    $('.mobile-nav-tab').each(function (index) {
        if ($(this).attr("id") == clickedId) {
            $('.mobile-nav-tab,.content-item').eq(index).addClass('active');
            $(".content-item").eq(index).slideDown();
        } else {
            $('.mobile-nav-tab,.content-item').eq(index).removeClass('active');
            $(".content-item").eq(index).hide();
        }
    });
});

http://jsfiddle.net/megarameno/L9Uge/4/

Answer 5

A）您应该开始将对象缓存到变量中，例如

var tabs = $('.mobile-nav-tab'),
    search = $('#search'),
    searchTab = $('#search-tab');

而不是一次又一次地跳进DOM

B）有一个jQuery方法siblings()可以像魅力一样工作。您可能需要稍微修改HTML以获得最佳结果，但这比单独选择每个选项卡要容易得多。它看起来像这样：

selectedTab.slideDown().siblings().hide();

向下滑动所需的标签，并隐藏DOM中同一级别的所有其他标签。

我希望这可以帮助你，让你走向一个新的方向。

改进JavaScript - 活动菜单和显示/隐藏div的jQuery代码

5 个答案: