2

我想知道如何改进此代码？我在导航中有 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 部分。但我想知道有没有其他方法可以改进它并使其更短？

4

5 回答 5

4

这应该大大缩短它：

$(".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();
});
于 2013-04-08T17:12:35.503 回答
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
    });
});
于 2013-04-08T17:14:30.127 回答
1

我认为你可以清理它：

$('.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();
});
于 2013-04-08T17:12:07.607 回答
1 
$('.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/

于 2013-04-08T17:42:03.963 回答
0

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

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

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

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

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

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

我希望这对您有所帮助，并使您朝着新的方向前进。

于 2013-04-08T17:11:42.790 回答