使Twitter Bootstrap导航栏链接处于活动状态

在Twitter Bootstrap导航栏中join主动链接的标准方式是什么? 很明显,一个链接通过获得“主动”类获得积极的外观。 例如,下面的Home链接处于活动状态。 当我点击导航栏中的任何链接,应该使用jQuery从li元素中删除所有类,然后将active类添加到我已经id'd的链接?

 <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> 。 代码看起来像这样

由提问者testing

HTML文件内的HTML

在链接目标请求uri中传递的<li>标记内embedded一个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

本教程为这个“问题”提供了一个很好的终极解决scheme。 我刚才在处理这个问题,对我很好,也可以定制

 $(document).ready(function() { $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); }); 

如果你不想处理服务器端,并且在所有hrefs都很简单的情况下,比如“/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类的页面上有多个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; } 

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" ); 

谢谢你!!

在页面底部添加以下脚本:

 <script> $(document).ready(function() { var url = this.location.pathname; var filename = url.substring(url.lastIndexOf('/')+1); $('a[href="' + filename + '"]').parent().addClass('active'); }); </script> 

你可以用CSS解决它。

向每个页面的主体添加一个类:

 <body class="home"> 

或者,如果您在联系页面上:

 <body class="contact"> 

然后在创build样式时考虑这一点:

 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>