javascript - 如何从 twitter bootstrap 将事件类设置为导航菜单

Question

我是 twitter bootstrap 的新手。使用那里的导航菜单。我正在尝试将事件类设置为选定菜单。我的菜单是 -

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="broker"><a href="~/Home/Broker">Broker</a></li>
    <li><a href="#">Sale</a></li>
  </ul>
</div>

我在谷歌上搜索后尝试了以下事情，我必须从菜单中的每个页面上设置事件类，如--

<script>
  $(document).ready(function () {
    $('#home').addClass('active');
  });
</script>

但上面的问题是我将主菜单设置为默认选择。然后它总是被选中。 还有其他方法吗？ ，或者我可以概括并将我的 js 保留在布局文件本身中？

执行应用程序后，我的菜单看起来 -

点击其他菜单项后，我得到以下结果-

并且我在 Index View 和 Broker View 上添加了以下脚本 ---

<script>
  $(document).ready(function () {
    $('#home').addClass('active');
  });
</script>

<script>
  $(document).ready(function () {
    $('#broker').addClass('active');
  });
</script>

分别。

Answer 1

您可以使用这个 JavaScript\jQuery代码:

// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');

它将设置 <a>的 parent <li>和 <li>的 parent <ul>作为活跃。

一个简单有效的解决方案!

---

原始出处:

Bootstrap add active class to li