php 使 Twitter Bootstrap 导航栏链接处于活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11813498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Twitter Bootstrap navbar link active
提问by Rose Perrone
What's the standard way to make the active link in a Twitter Bootstrap navbar bolded? It's clear that a link gains the active appearance by gaining the "active" class. For example, the Homelink below is active. When I click any link in the navbar, should a use jQuery to remove all classes from lielements and then add the activeclass to the link I've id'd?
将 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>
EDIT: I included
编辑：我包括
<script type="text/javascript">
$('.nav li a').on('click', function() {
alert('clicked');
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
after the links. The alert appears when I click a link, but the "active" class is not added to the link.
在链接之后。单击链接时会出现警报，但“活动”类未添加到链接中。
Here's all of my navbar HTML:
这是我所有的导航栏 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>
回答by Chris Moutray
You need to ensure that you set the activeclass as part of the request response (as the page loads) and not before ie when the user clicks a link to request a different page.
您需要确保将活动类设置为请求响应的一部分（在页面加载时），而不是在用户单击链接以请求不同页面之前。
First you need to determine which navlinkshould be set as active and then add the activeclass to the <li>. The code would look something like this
首先，您需要确定navlink应将哪个设置为活动，然后将活动类添加到<li>. 代码看起来像这样
Tested by asker:
由提问者测试：
HTML within php file
php 文件中的 HTML
Call a php function inline within the <li>markup passing in the links destination request uri
在<li>传递链接目标请求 uri的标记中内联调用 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 function
PHP函数
The php function simple needs to compare the passed in request uri and if it matches the current page being rendered output activeclass
php 函数 simple 需要比较传入的请求 uri 是否匹配当前呈现的页面输出活动类
<?php
function echoActiveClassIfRequestMatches($requestUri)
{
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="active"';
}
?>
回答by tmatyo
http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html
http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html
This tutorial has a great and ultimate solution for this "problem". I was dealing with it a while ago and working great for me, customizable as well
本教程为这个“问题”提供了一个很好的终极解决方案。不久前我正在处理它并且对我来说很好用，也可以定制
$(document).ready(function() {
$('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
回答by vtk13
If you do not want to deal with server side and in the case where all hrefs are simple, like '/page.php', you can call
如果您不想处理服务器端并且在所有 hrefs 都很简单的情况下，例如 '/page.php'，您可以调用
$('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');
after page is loaded.
页面加载后。
回答by Chris Clower
You can try:
你可以试试：
$('.nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active').css('font-weight', 'bold');
});
It would be best to give your navan idattribute though, because you may have more than one nav on a page with the navclass.
不过最好给你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');
});
Alternatively, instead of using .css('font-weight', 'bold'), you could just put this in the stylesheet:
或者，.css('font-weight', 'bold')您可以不使用，而是将其放在样式表中：
.active {
font-weight: bold;
}
回答by meda
Add the following script at the bottom of the page:
在页面底部添加以下脚本：
<script>
$(document).ready(function() {
var url = this.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
$('a[href="' + filename + '"]').parent().addClass('active');
});
</script>
回答by delor34n
Chris Moutray your answer helped me a lot in the develop of my software (i'm using ZendFramework). I wrote this view helper:
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"';
}
}
In this case i call this helper in the view thus:
在这种情况下，我在视图中调用这个助手：
<?php $this -> activeOrNot ( "public" );
Thanks U!!
谢谢你！！
回答by Luca Mori Polpettini
You can solve it with CSS.
你可以用CSS解决它。
Add a class to the body of each page:
在每个页面的正文中添加一个类：
<body class="home">
Or if you're on the contact page:
或者，如果您在联系页面上：
<body class="contact">
Then take this into consideration when you're creating your styles:
然后在创建样式时考虑到这一点：
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; }
Lastly, apply class names to your list items:
最后，将类名应用于您的列表项：
<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>
This point, whenever you're on the body.home page, your li.home a link will have default styling indicating it is the current page.
这一点，无论何时您在 body.home 页面上，您的 li.home 链接都会具有默认样式，表明它是当前页面。
回答by JBarros
Just put the below code into "head" section.
只需将以下代码放入“head”部分即可。
<script type="text/javascript">
$(document).ready(function () {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active");
});
</script>
obviously don't forget your call to jquery.js before.
显然不要忘记您之前对 jquery.js 的调用。
And your:
和你的：
<style>
.active{something...}
</style>
回答by GoodViber
If you assign $pageTitle to the page name, you can do this without javascript
如果将 $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>
