jquery - jquery，如何为选项卡式导航设置活动项目

Question

我有以下代码，在每个导航上显示选项卡式信息。项目点击：

$('#unlock_nav a').click(function() {
    $('.navActive').hide().removeClass('navActive'); 

    var id = $(this).attr('href');
    $(id).show().addClass('navActive');

    return false;       
});

示例 HTML：

<div id="unlock_nav">
  <ul> 
    <li id="i1"><a href="#tunic" class="unlock_ni" style="width:53px;height:27px;position:absolute;top:0;left:30px;z-index:3;background-image: url(http://www.mysiteurl/buttn_tunic_white.png);background-repeat:no-repeat; cursor:pointer;"></a>
    </li>        
    <li id="i2"><a href="#jacket"  class="unlock_ni" style="width:67px;height:27px;position:absolute;top:22px;left:30px;z-index:3;background-image: url(http://www. http://www.mysiteurl/buttn_jacket_white.png);background-repeat:no-repeat; cursor:pointer;"></a>
    </li>  
  </ul>
</div>

Answer 1

如果你想用一个navActive类突出显示点击的链接，你可以使用 this关键字。但是，调用.hide()可能不是您想要的行为。

$('#unlock_nav a').click(function() {
    $('.navActive').removeClass('navActive'); 
    $(this).addClass('navActive');
    return false; // (optional) prevents #anchor appearing in URL bar       
});

在http://jsfiddle.net/u9e3X/8/上试用演示。