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

我想知道如何改进此代码？我在导航中有3个菜单按钮。第一个默认是激活的。点击后，其他按钮将被分配为活动类别。改善JavaScript - 用于活动菜单和显示/隐藏div的jQuery代码

<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部分。但我想知道有没有其他方法可以改善它并缩短它？

来源

2013-04-08 Dušan

这应该缩短了相当大：

$(".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-08 17:12:35 tymeJV

感谢您的回答，这很好。 – 2013-04-08 17:21:44

A）你应该开始高速缓存对象到变量，如

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

，而不是一次又一次

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

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

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

我希望这可以帮助你，并将你放在一个新的方向。

来源

2013-04-08 17:11:42

感谢您的回答，虐待尝试此解决方案。 – 2013-04-08 17:24:42

我认为你可以清理到这一点：

$('.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-08 17:12:07 lucuma

感谢您的答案，但这只设置活动类，但不显示/隐藏div。 – 2013-04-08 17:21:26

对不起，我有一些错别字。我更新了它。 – lucuma 2013-04-08 17:22:23

这只针对'＃search-tab' ID？ – 2013-04-08 17:27:08

简单地遍历所有的各种头衔：

$(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-08 17:14:30 Manishearth

'缺少'$（'＃+ a [i]）中的字符。hide（）;' – 2013-04-08 17:19:41

@MiljanPuzović：哦，对了，谢谢你的提升:) – Manishearth 2013-04-08 17:20:41

$('.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-08 17:42:03

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

回答

相关问题