-2

我使用引导药丸作为我的导航栏。问题是它没有显示具有蓝色背景的当前活性药丸（如引导程序）这是我的代码

<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>

输出在这里

只有家庭药丸是专注的

4

2 回答 2

2

在标签内添加此代码script：

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

演示

于 2013-03-26T15:50:03.553 回答
0

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

但是，我相信您期望发生的是，当您单击一个链接时，药丸将自动变为活动状态，这不是它的工作原理。

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

因此，假设您单击第二个菜单项，在 Projects.php 页面上，您可以拥有以下 jquery。

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

假设您提供了菜单项 ID。

于 2013-03-26T15:56:03.823 回答