<!DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
<title>CSS+jQuery打造的点击显示当前选中菜单项的导航效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
*{ margin: 0; padding: 0; border:0px; list-style:none; margin: 0 auto;}
*a { text-decoration:none; color:# 000;}
ul { width:800px; height:30px; background-color:#C33;}
ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:# 000;}
ul li a { color:# 000; display:block; width:160px; height:30px; text-decoration:none;}
.first { background-color:#0000FF;}
ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;}
</style>
<script type= " text/javascript " src= " /images/jquery1.3.2.js "></script>
<script language= " javascript " type= " text/javascript ">
$(document).ready(function (){
$( " li ").each(function(index){
$( this).click(function(){
$( " li ").removeClass( " first ");
$( " li ").eq(index).addClass( " first ");
});
});
});
</script>
</head>
<body>
<ul>
<li class= " first "><a href= " # ">首页</a></li>
<li><a href= " # ">列表</a></li>
<li><a href= " # ">内容</a></li>
<li><a href= " # ">联系</a></li>
<li><a href= " # ">关于</a></li>
</ul>
</body>
</html>
<br><br><br><br><br><br><br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href= " /images/jquery1.3.2.js ">jquery1. 3.2.js</a><hr><p align= " center "> <font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
<title>CSS+jQuery打造的点击显示当前选中菜单项的导航效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
*{ margin: 0; padding: 0; border:0px; list-style:none; margin: 0 auto;}
*a { text-decoration:none; color:# 000;}
ul { width:800px; height:30px; background-color:#C33;}
ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:# 000;}
ul li a { color:# 000; display:block; width:160px; height:30px; text-decoration:none;}
.first { background-color:#0000FF;}
ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;}
</style>
<script type= " text/javascript " src= " /images/jquery1.3.2.js "></script>
<script language= " javascript " type= " text/javascript ">
$(document).ready(function (){
$( " li ").each(function(index){
$( this).click(function(){
$( " li ").removeClass( " first ");
$( " li ").eq(index).addClass( " first ");
});
});
});
</script>
</head>
<body>
<ul>
<li class= " first "><a href= " # ">首页</a></li>
<li><a href= " # ">列表</a></li>
<li><a href= " # ">内容</a></li>
<li><a href= " # ">联系</a></li>
<li><a href= " # ">关于</a></li>
</ul>
</body>
</html>
<br><br><br><br><br><br><br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href= " /images/jquery1.3.2.js ">jquery1. 3.2.js</a><hr><p align= " center "> <font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
