1

我正在使用 twitter bootstrap 并撰写我有一个这样的标题

  <ul class="nav navbar-nav">
    <li><a href="#" class="active" onclick="$(this).addClass('active')">Home</a></li>
    <li class="currentselection"><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>

结果如下所示：

主页 | 关于 | 接触

LIVE版本可以在这里看到：

主页 | 关于 | 联系 - 现场演示

问题是，我想设置一个并且只有一个<a>是活动的，所以如果用户点击关于，<a class="active">About</a>将被设置为活动的，而<a>Home</a>不再被标记为活动的。这看起来很常见，应该很容易实现，但我已经修修补补了 2 天，真的不知道，来自 C 和 CPP 背景，我在 javascript 方面非常薄弱......请你解释并标记哪个我可以实现这一点的文件（.css 或 .js 或 .html 本身内部）？

非常感谢您的帮助！

4

1 回答 1

1

你已经用 twitter-bootstrap 标记了这个，这是否意味着你运行了 jQuery？如果是这样，那么这很容易解决。

您只需像这样设置 CSS：

.nav li a { color: #000; background: #FFF; }
.nav li a.active { color: #FFF; background: #FF0000 }

然后，您可以通过在脚本中的某处放置一个 jQuery 侦听器来更改元素上的“活动”类。在这种情况下，您正在倾听有人点击它：

$(function() {
   $('ul.nav li a').on('click', function(e) {

       //this line prevents the link for actually redirecting you
       e.preventDefault(); 

       //this line clears whatever the previous active link was
       $(this).closest('ul').find('li a.active').removeClass('active');

       //this line adds the class to the current link
       $(this).addClass('active');

   });
});
于 2013-08-11T01:29:35.733 回答