使用jQuery的简单菜单选项卡

我正在尝试使用jQuery创建简单的选项卡菜单。它应该根据导航图标显示和隐藏一个div

JSFIDLE:

HTML

<div class="nav">
  <ul>
    <li class="all"><a href="javascript:void(0)">All Contacts</a></li>
    <li class="face selected" ><a href="javascript:void(0)">Facebook</a></li>
    <li class="go"><a href="javascript:void(0)">Google</a></li>
    <li class="ya"><a href="javascript:void(0)">Yahoo</a></li>
    <li class="hot"><a href="javascript:void(0)">Hotmail</a></li>
    <li class="man"><a href="javascript:void(0)">Manually Added</a></li>
  </ul>
</div>

<p>&nbsp;</p>

<div class="frndList"  >

  <ul id="all">
    <li>ALLLL</li>
  </ul>

  <ul id="face">
    <li>FACEEEE</li>
  </ul>

  <ul id="go">
    <li>goooo</li>
  </ul>

  <ul id="ya">
    <li>YAAAA</li>
  </ul>

  <ul id="hot">
    <li>HOTTTT</li>
  </ul>

  <ul id="man">
    <li>MANNNNNN</li>
  </ul>

</div>

试试这个

$('a', '.nav').click(function(){
   var name = $(this).parent('li').attr('class').replace(/selected/gi, '');
   $('.selected', '.nav').removeClass('selected');
   $(this).parent().addClass('selected');
   $('ul', '.frndList').hide();
   $('#' + name).show();
})

小提琴

试试这个：

  $('.nav li a').click(function (e) {
     e.preventDefault();
     var name = $(this).parent('li').attr('class');
     $('.selected').removeClass('selected'); // removes the selected class
     $(this).addClass('selected'); // adds the selected class to current clicked elem
     $('#'+name).show().siblings('ul').hide(); // shows the target and hides other
  });

剧本

$('.frndList ul').first().show(); 
$('.nav li a').click(function(){

        var name = $(this).parent('li').attr('class');
            alert(name)
        $('.nav li a').parent('li').removeClass('selected');
        $(this).parent('li').addClass('selected');
        $('.frndList ul').css('display','none');
        $('.frndList ul#'+name).css('display','block');         
        })

CSS

HTML

奥尔尔



Faceee



咕咕



雅阿



霍特特



曼恩

我听不懂。。你到底想做什么？谢谢你考虑@ KANANAYSJD，我想点击任何<代码> <代码>标签，然后所有的

将隐藏在<代码> <代码>中，只有'ID < UL>，ID名称与点击<代码>类> <代码>标签的父母'LI>将显示……可能是解释你所做的修复它的原因。

$('.frndList ul').first().show(); 
$('.nav li a').click(function(){

        var name = $(this).parent('li').attr('class');
            alert(name)
        $('.nav li a').parent('li').removeClass('selected');
        $(this).parent('li').addClass('selected');
        $('.frndList ul').css('display','none');
        $('.frndList ul#'+name).css('display','block');         
        })

.frndList ul{display:none;}

<div class="nav">
            <ul>
                <li class="all"><a href="javascript:void(0)">All Contacts</a></li>
                <li class="face" ><a href="javascript:void(0)">Facebook</a></li>
                <li class="go"><a href="javascript:void(0)">Google</a></li>
                <li class="ya"><a href="javascript:void(0)">Yahoo</a></li>
                <li class="hot"><a href="javascript:void(0)">Hotmail</a></li>
                <li class="man"><a href="javascript:void(0)">Manually Added</a></li>
            </ul>
        </div>

<p>&nbsp;</p>

<div class="frndList"  >

          <ul id="all">
            <li> ALLLL
            </li>          
            </ul>



            <ul id="face">
            <li> FACEEEE
            </li>
             </ul>


            <ul id="go">
            <li>goooo
            </li>
             </ul>



            <ul id="ya">
            <li> YAAAA
            </li>
             </ul>



            <ul id="hot">
            <li> HOTTTT
            </li>
             </ul>



            <ul id="man">
            <li> MANNNNNN
            </li>
             </ul>



          </div>