-1

申し訳ありませんが、私はjsにかなり慣れていません。基本的に、上部にメインナビゲーション（#filter）があり、さらに3つのリスト（、、#oneおよび#two）があり#threeます。

私がやりたいのは、[すべて]をクリックすると、、、およびのすべてのリストアイテムが表示される#oneこと#twoです#three。次に、クリックすると、、 from 、fromOneのリストアイテムのみが表示されます。#oneTwo#twoThree#three

これが役立つマークアップです。

<ul id="filter">
  <li class="current">
    <a href="#">All</a>
  </li>
  <li>
    <a href="#">One</a>
  </li>
  <li>
    <a href="#">Two</a>
  </li>
  <li>
    <a href="#">Three</a>
  </li>
</ul>

<ul id="one">
  <li>
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">1</a>
  </li>
</ul>

<ul id="two">
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
</ul>

<ul id="three">
  <li>
    <a href="#">3</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
</ul>
4

1 に答える 1

2 
$(function() {
    $('#filter a').on('click', function(e) {
        e.preventDefault();
        var clicked = $.trim( $(this).text().toLowerCase() );
        if ( clicked == 'all' ) {
            $('#one, #two, #three').show();
        }else{
            $('#one, #two, #three').hide();
            $('#' + clicked).show();
        }

        $(this).closest('li')
               .addClass('current')
               .siblings()
               .removeClass('current');
    });
});
于 2013-02-20T20:42:39.363 に答える