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

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 に答える