在Twitter Bootstrap导航栏中加粗活动链接的标准方法是什么？很明显，链接通过获得“活动”类来获得活跃的外观。例如，下面的Home链接处于活动状态。当我单击导航栏中的任何链接时，是否应该使用jQuery从li元素中删除所有类，然后将active类添加到我已经识别的链接中？
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
编辑：我包括在内
<script type="text/javascript">
$('.nav li a').on('click', function() {
alert('clicked');
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
链接后。单击链接时会显示警报，但“活动”类未添加到链接中。
这是我的所有导航栏HTML：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">AuctionBase</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="home.php">Search</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div>
</div>
</div>
您需要确保将活动类设置为请求响应的一部分（如页面加载），而不是在用户单击链接以请求其他页面之前。
首先，您需要确定哪个navlink应设置为活动状态，然后将活动类添加到<li>。代码看起来像这样
经问者测试：
php文件中的HTML
在链接目标请求uri中传递的<li>标记内部调用php函数
<ul class="nav">
<li <?=echoActiveClassIfRequestMatches("home")?>>
<a href="home.php">Search</a></li>
<li <?=echoActiveClassIfRequestMatches("about")?>>
<a href="about.php">About</a></li>
</ul>
PHP功能
php函数简单需要比较传入的请求uri以及它是否匹配当前正在呈现的页面输出活动类
<?php
function echoActiveClassIfRequestMatches($requestUri)
{
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="active"';
}
?>
http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html
本教程为这个“问题”提供了一个很好的终极解决方案。我不久前正在处理它并为我工作，也可以自定义
$(document).ready(function() {
$('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
如果您不想处理服务器端，并且在所有href都很简单的情况下，例如'/page.php'，您可以调用
$('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');
页面加载后。
你可以试试：
$('.nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active').css('font-weight', 'bold');
});
最好给你的nav一个id属性，因为你可能在nav类的页面上有多个导航。
$('#main-nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active').css('font-weight', 'bold');
});
或者，您可以将其放在样式表中，而不是使用.css('font-weight', 'bold')：
.active {
font-weight: bold;
}
在页面底部添加以下脚本：
<script>
$(document).ready(function() {
var url = this.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
$('a[href="' + filename + '"]').parent().addClass('active');
});
</script>
Chris Moutray你的答案帮助了我很多软件的开发（我正在使用ZendFramework）。我写了这个视图助手：
<?php
class Zend_View_Helper_ActiveOrNot {
function activeOrNot ( $requestUri ) {
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="active"';
}
}
在这种情况下，我在视图中调用此帮助程序：
<?php $this -> activeOrNot ( "public" );
谢谢你！！
你可以用CSS解决它。
在每个页面的正文中添加一个类：
<body class="home">
或者，如果您在联系页面上：
<body class="contact">
然后在创建样式时考虑到这一点：
ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; }
ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; }
最后，将类名应用于列表项：
<ul>
<li class="home"><a href="index.php">Home</a></li>
<li class="contact"><a href="contact.php">Contact Us</a></li>
<li class="about"><a href="about.php">About Us</a></li>
</ul>
这一点，每当你在body.home页面上，你的li.home链接将具有默认样式，表明它是当前页面。
如果您将$ pageTitle分配给页面名称，则可以在不使用javascript的情况下执行此操作
<ul class="nav navbar-nav">
<li <?php if ($pageTitle == "Website Development") {echo 'class="active"';} ?>>
<a href="website-development.php">
Web Development
</a>
</li>...</ul>
只需将以下代码放入“head”部分即可。
<script type="text/javascript">
$(document).ready(function () {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active");
});
</script>
显然不要忘记你之前对jquery.js的调用。
和你的：
<style>
.active{something...}
</style>