怎么实现导航栏-正在浏览的页面导航栏高亮
日期：2014-05-17 浏览次数：20977 次
如何实现导航栏-正在浏览的页面导航栏高亮？
#navigation ul li a#active {
background: url(../images/navigation-active.gif);
color: #a21 !important;
font-weight: bold;
}
如何实现导航栏-正在浏览的页面导航栏高亮？
用了active，但是只是点了连接的一瞬间替换成图片了，鼠标一移动开，就又回复原状。 要怎么弄？
------解决方案--------------------
貌似只有用脚本来解决！
------解决方案--------------------
那就用一个循环：
<html>
<style type= "text/css ">
a{
font-size:13px;
color:#006633;
text-decoration:none;
cursor:hand;
}
#activer{
font-size:15px;
font-weight:bold;
color:#006633;
text-decoration:none;
}
</style>
<body>
<a href= "# " onclick= "change(this) "> 菜单一 </a>
<a href= "# " onclick= "change(this) "> 菜单一 </a>
<a href= "# " onclick= "change(this) "> 菜单一 </a>
</body>
<script>
function change(obj){
for(i=0;i <document.links.length;i++){
document.links[i].id= " ";
}
obj.id= "activer ";
}
</script>
</html>
------解决方案--------------------
1.如果是纯静态的html，你可以在每个链接加上不同的id或者class用css区别
2.用js判断当前页面的所属栏目，然后改变对应的链接
3.用js判断当前document.location，根据文件名改变对应的链接
4.如果页面是通过后台程序或者其他程序输出的就更简单了，直接改就行
------解决方案--------------------
关注中^^^
web开发技术群 25656077
#navigation ul li a#active {
background: url(../images/navigation-active.gif);
color: #a21 !important;
font-weight: bold;
}
如何实现导航栏-正在浏览的页面导航栏高亮？
用了active，但是只是点了连接的一瞬间替换成图片了，鼠标一移动开，就又回复原状。 要怎么弄？
------解决方案--------------------
貌似只有用脚本来解决！
------解决方案--------------------
那就用一个循环：
<html>
<style type= "text/css ">
a{
font-size:13px;
color:#006633;
text-decoration:none;
cursor:hand;
}
#activer{
font-size:15px;
font-weight:bold;
color:#006633;
text-decoration:none;
}
</style>
<body>
<a href= "# " onclick= "change(this) "> 菜单一 </a>
<a href= "# " onclick= "change(this) "> 菜单一 </a>
<a href= "# " onclick= "change(this) "> 菜单一 </a>
</body>
<script>
function change(obj){
for(i=0;i <document.links.length;i++){
document.links[i].id= " ";
}
obj.id= "activer ";
}
</script>
</html>
------解决方案--------------------
1.如果是纯静态的html，你可以在每个链接加上不同的id或者class用css区别
2.用js判断当前页面的所属栏目，然后改变对应的链接
3.用js判断当前document.location，根据文件名改变对应的链接
4.如果页面是通过后台程序或者其他程序输出的就更简单了，直接改就行
------解决方案--------------------
关注中^^^
web开发技术群 25656077
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
