我想在访问特定网址的时候将{class}活动添加到<li>
?
我的代码看起来像这样,
<ul>
<li>
<a href="link1">Link1</a>
</li>
<li>
<a href="link2">Link2</a>
</li>
<li>
<a href="link3">Link3</a>
</li>
<li>
<a href="link4">Link4</a>
</li>
<li>
<a href="link5">Link5</a>
</li>
<li>
<a href="link6">Link6</a>
</li>
</ul>
如果网址中存在www.abc/link1,那么只有第一个li应该是活动的,其余的应该没有任何类。
事先提前
答案 0 :(得分:4)
以下是使用JavaScript实现的方法......
var normalisePath = function(path) { return path.replace(/^\/|\/$/g, ''); },
var path = normalisePath(window.location.pathname),
li = document.getElementsByTagName('li'),
i, length, a;
for (i = 0, length = li.length; i < length; i++) {
a = li[i].getElementsByTagName('a')[0];
if (normalisePath(a.pathname) == path) {
li[i].className += ' active';
break;
}
}
答案 1 :(得分:1)
使用jQuery,您可以使用:
$("li").addClass("active");
你必须开发逻辑部分......
编辑: ...以下是:
$(function() {
$("li").removeClass("active");
var current = window.location.pathname.split('/').pop();
$('a[href="' + current + '"]').addClass("active");
});
答案 2 :(得分:1)
只需将一个变量添加到与每个页面一起的网址
www.abc/link1?link_num=1
然后
switch($_GET[link_num]){
case '1':
$style1 = 'class=active';
break;
case '2';
$style2 = 'class=active';
break;
etc...
}
然后
<ul>
<li>
<a href="link1?link_num=1" <?=$style1?>>Link1</a>
</li>
<li>
<a href="link2?link_num=1" <?=$style2?>>Link2</a>
</li>
<li>
etc
有一种更好的方式我确定但这样做会
答案 3 :(得分:0)
检查
var path = window.location.pathname
并将其与您的li
进行比较。将active
课程添加到li
s href与a
匹配的path
。