0

私は、liをクリックすると非表示のdivをロードするjQuery駆動のサイドナビゲーションメニューを持っています。別のliをクリックすると、他のすべての非表示のdiv IDに hide() 関数があります。理想的には、liをクリックすると、非表示のdivが表示され、以前にあったdivが非表示になる方法を探しています。IDに基づいて非表示の各divをロードする必要がありますが、新しいdivをロードする前に現在のコンテンツを非表示にする方法があると思います. これが私が現在持っている方法です：

         <ul>
            <li id="overview" class="selector"><a href="#">OVERVIEW</a></li>
            <li id="whyus" class="selector"><a href="#">WHY US</a></li>
            <li id="clients" class="selector"><a href="#">CLIENTS & TESTIMONIALS</a>   </li>
            <li id="staff" class="selector"><a href="#">MEET THE STAFF</a></li>
        </ul>

jQuery(document).ready(function() {

jQuery("#overviewHidden").fadeIn();
    jQuery("li#overview").addClass('active');



jQuery("li.selector").click(function () {
  jQuery(this).addClass('active');
  jQuery(this).siblings().removeClass('active');
});



    jQuery("#overview").click(function(){
        jQuery('#whyusHidden, #clientsHidden, #staffHidden').hide();
                    jQuery('#overviewHidden').slideDown();
    });

    jQuery("#whyus").click(function(){
        jQuery('#overviewHidden, #clientsHidden, #staffHidden').hide();
                    jQuery('#whyusHidden').slideDown();
    });

    jQuery("#clients").click(function(){
        jQuery('#overviewHidden, #whyusHidden, #staffHidden').hide();
                    jQuery('#clientsHidden').slideDown();   
    });

    jQuery("#staff").click(function(){
        jQuery('#clientsHidden, #overviewHidden, #whyusHidden').hide();
                    jQuery('#staffHidden').slideDown();
    });

});

すべての div の hide() の代わりに、現在の div が何であれ非表示にしたいと思います。ありがとう、

4

2 に答える 2

0

リンクをクリックすると、アクティブなクラス名のオンとオフを切り替えることができ、同時にアクティブな div を非表示にできます。これが実際の例ですhttp://codepen.io/lukeocom/pen/eFdjI

uleach の代わりに にクラスを追加して、コードを改善することもできますli。次に、それぞれに個別のクラス名を使用liして、非表示の div を選択します。<a>タグにクリック機能を簡単に割り当てることができるため、タグを使用する必要はありません<li>。

$('.selector li').click(function(){
  //hide current displayed div
  $('.active').toggleClass('active').hide();

  //get the class name of this item to select the hidden div.
  var theId = '#' + $(this).attr('class');
  //show the div, assign active class
    $(theId).toggleClass('active').fadeIn(500);
});

お役に立てれば

于 2013-06-09T02:13:24.890 に答える