javascript - Bootstrap 2.3 导航栏事件菜单不起作用？

Question

当你点击任何链接时，我试图让导航栏聚焦白色。

代码如下:

$('.navbar li').click(function (e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

如您所见，这工作正常。我单击哪个链接都会激活(白色)，而其他链接会变暗。

但如您所见，e.preventDefault(); 阻止了链接操作。当我摆脱那条线时，它会完全刷新整个页面，然后我再次失去事件链接。我有点需要或使用 ajax 来加载页面内容(我不喜欢这样做)或者还有其他方法吗？

Answer 1

我至少可以想到几种方法来解决这个问题

1. 在客户端处理

   例如。

   假设 url 模式以某种方式与按钮链接匹配，在这种情况下，在 javascript 中操作 url 字符串以找到相应的事件元素并使其成为事件类

2. 将逻辑保留在服务器端，并相应地呈现 UI——假设您可能使用服务器端后端

   例如。在 PHP 中

   // set the active element 
   $activeLink = 'link1';
   // when rendering 
   <li class = <?= ($activeLink == 'link1') ? 'active' : '';?> ><a>link1</a></li>