使用jQuery的简单菜单选项卡

Question

我正在尝试使用jQuery创建简单的标签菜单。哪个应该根据导航图标点击显示和隐藏div。

JSfiddle： check my code on fiddle

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>

SCRIPT

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

Answer 1

试试这个

$('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();
})

小提琴here

Answer 2

试试这个：

  $('.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
  });

Fiddle

Answer 3

DEMO

脚本

$('.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

.frndList ul{display:none;}

HTML

<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>