Question

即时通讯使用bootstrap药丸作为我的导航栏。问题是它没有显示蓝色背景（如引导）的curent活性药丸这是我的代码

<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
    <ul class="nav nav-pills">
        <li class="active">
            <a href="index.php">Home</a></li>
        <li class=""><a href="Project.php">Projects</a></li>

        <li class=""><a href="#">Employee</a></li>

        <li><a href="#">Forum</a></li>


    </ul>
</div>

输出为here

只有家庭药丸才会聚焦

Answer 1

在script代码中添加此代码：

$(document).ready(function(){
   $(".nav-pills li").click(function(){
       $(".active").removeClass("active");
       $(this).addClass("active");
   });
});

DEMO

Answer 2

要根据评论给出完整答案，您的JSFiddle完全按预期工作。具有.active类的项目将具有药丸的蓝色背景。

然而，我相信您期望发生的事情是当您点击药丸将自动变为活动状态的链接时，这不是它的工作方式。

您需要动态生成菜单并在生成期间或在每个页面上分配活动类，使用JS将活动类分配给正确的菜单列表项。为了便于使用，我建议将ID分配给列表项，以便您可以执行以下操作：

所以说你点击第二个菜单项，在Projects.php页面上你可以得到以下jquery。

$('#project').addClass("active");

假设您提供了菜单项ID。

引导药片

2 个答案: