Question

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

以下是代码：

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

如你所见，这很好用。哪一个链接我点击它得到actibve（白色），其他人变黑。

但是你可以看到e.preventDefault();阻止了链接操作。当我摆脱那条线然后它完全刷新整个页面然后我再次失去活动链接。不知何故，我需要或使用ajax来加载页面内容（我不喜欢这样做）或者还有其他方式吗？

Answer 1

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

在客户端处理

例如。

让我们假设url模式以某种方式匹配按钮链接，在这种情况下，操纵javascript中的url字符串以找到相应的活动元素并使其活动类

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

例如。在PHP

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

Bootstrap 2.3导航栏活动菜单不起作用？

1 个答案: