javascript - 改进JavaScript-用于事件菜单和显示/隐藏div的jQuery代码

我想知道如何改进此代码？
我在导航中有3个菜单按钮。默认情况下，第一个处于 Activity 状态。单击时，将为其他按钮分配 Activity 类别。

<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零件。
但是我想知道还有其他方法可以改进它并使它更短吗？

最佳答案

这应该大大缩短它:

$(".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();
});

关于javascript - 改进JavaScript-用于事件菜单和显示/隐藏div的jQuery代码，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15884880/