我正在使用php includes来构建一个多页面网站。使用jquery,我将如何为每个网页添加一个类"活动"菜单突出显示用户当前正在查看的任何网页。
这是我的导航html:
<nav class="menu">
<ul class="nav">
<li><?php if ($thisPage=="Home")
echo " id='"currentpage'""; ?><a href="http://urcsc170.org/pdouge/project3xc/index.php">Home</a></li>
<li><?php if ($thisPage=="Jeff Bezos")
echo " id='"currentpage'""; ?><a href="http://urcsc170.org/pdouge/project3xc/jeff-bezos.php">Jeff Bezos</a></li>
<li><?php if ($thisPage=="Larry Page")
echo " id='"currentpage'""; ?><a href="http://urcsc170.org/pdouge/project3xc/larry-page.php">Larry Page</a></li>
<li><?php if ($thisPage=="Edward Snowden")
echo " id='"currentpage'""; ?><a href="http://urcsc170.org/pdouge/project3xc/edward-snowden.php">Edward Snowden</a></li>
<li><?php if ($thisPage=="Elon Musk")
echo " id='"currentpage'""; ?><a href="http://urcsc170.org/pdouge/project3xc/elon-musk.php">Elon Musk</a></li>
</ul>
</nav>
如果下面的activeurl自动匹配您的活动类分配,则会获得当前url。
/*active menu class*/
<ul class="menu">
<li><a href="demo.com">home</a>
</li>
<li><a href="xyz.com/category/test">Editorial</a></li>
</ul>
$(document).ready(function(){
var activeurl = window.location;
$('a[href="' + activeurl + '"]').parent('li').addClass('active');
});
将其添加到li标签
class="<?php if ($thisPage=="Home") print $active_class; ?>"
其中$active_class=active在页面中的某个位置初始化它