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

我想知道如何改进这段代码？ 我有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>

我发现我能用三元运算符速记if-else部分。 但是我想知道有没有其他方法可以改进它并缩短它？

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

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

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

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

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

它向下滑动所需的选项卡，并隐藏DOM中同一级别上的所有其他选项卡

---

我希望这对您有所帮助，并将您带入新的方向。

我认为您可以将其清理到以下方面：

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

---

这将大大缩短时间：

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

---

只需在各种标题上循环：

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

---

在

$（'#+a[i]）.hide（）中缺少“字符”

谢谢您的回答，但这只设置了活动类，而不显示/隐藏div.：）

这

不带引号？：）我发烧了，不在办公室呆在家里。至少现在你的老板有了一个证据证明你真的病了：）谢谢你的回答，我会试试这个解决方案。

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

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