Php 如何动态更改(添加)导航链接的活动状态类
嗨,我正在尝试创建一个投资组合网站。为了不必为每个页面重新创建标题,我决定使用PHPPhp 如何动态更改(添加)导航链接的活动状态类,php,javascript,jquery,Php,Javascript,Jquery,嗨,我正在尝试创建一个投资组合网站。为了不必为每个页面重新创建标题,我决定使用PHPinclude函数添加标题。我现在唯一的问题是,当我单击一个链接导航到另一个页面时,活动的链接没有分别改变包含的HTML <ul id="main-menu"> <li><a href="index.php" class="active">home</a></li> <li><a href="about.php"&g
include
函数添加标题。我现在唯一的问题是,当我单击一个链接导航到另一个页面时,活动的链接没有分别改变包含的HTML
<ul id="main-menu">
<li><a href="index.php" class="active">home</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="portfolio.php">portfolio</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
我知道问题在于,每次页面加载时,它都会将类active重置为第一个链接。我不知道的是:如何动态地将活动类添加到页面匹配链接?尝试创建一个在页面加载时运行的函数,该函数选择与页面相同的
href
超链接
或者,通过AJAX加载页面的主要内容,而不是传统的页面位置更改。JQuery有一个很好的AJAX实现。在线搜索jqueryajax
另一种选择是在单击超链接时创建cookie,并通过读取cookie来设置所选的cookie。尽管这非常不可靠(后退按钮、手动url输入等)。您需要:
$(document).ready(function(){
var i = document.location.href.lastIndexOf("/");
var currentPHP = document.location.href.substr(i+1);
$("ul#main-menu li a").removeClass('active');
$("ul#main-menu li a[href^='"+currentPHP+"']").addClass('active');
});
简单:
$(document).ready(function(){
var $menu = $("ul#main-menu li a");
$menu.click(function(){
$menu.each(function(){
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
var link = document.location.href.split('/').slice(-1); // retrieve page name
$('#main-menu li a.active').removeClass('active'); // remove class 'active'
$('#main-menu li a[href$="'+link+'"]').addClass('active');// and add it to a matching link
@苏拉吉米什拉:是的,它有效。jsbin最近有一些更改,您只需将版本号(64)更改回1即可