在线演示地址: 评论1楼
复制代码无需任何修改可以看到效果
1 base.css文件
*{color:#fff;margin:0px;padding:0px;font-family:Georgia, "Times New Roman", Times, serif;font-size:16px;}
body{background-image:url(../images/bg.jpg);}
a{text-decoration:none;outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
ul,li{list-style:none;}
.clear {clear:both;}
#nav{height:40px;margin-bottom:-2px;}
#nav li{text-align:center;float:left;margin-right:3px;border-radius:8px 8px 0px 0px;}
#nav li.tabFocus{font-weight:bold;z-index:100;position:relative;background-color:black;}
#nav li a{width:100px;display:block;padding:8px;padding-top:12px;}
#content{width:1200px;height:auto;margin-left:auto;margin-right:auto;background-color:black;border-radius:5px;}
#content .aside_left{width:870px;height:auto;float:left;overflow:hidden;margin-left:20px;display:inline;}
2 index.html文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="baidu-tc-verification" content="55df68f711d2c61f5404932286e27233" /> <title>学习笔记</title> <link href="stylesheet/base.css" type="text/css" rel="stylesheet"/> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <div id="nav"> <li class="tabFocus " style="margin-left:50px;" ><a href="#">Home</a></li> <li ><a href="#">html5</a></li> <li ><a href="#">css3</a></li> <li ><a href="#">jquery</a></li> <li ><a href="#">ExtJS</a></li> <li ><a href="#">IE6兼容</a></li> <li ><a href="#">时间轴</a></li> </div> <div id="content"> <ul class="aside_left"> <li class="conFocus"> 1 </li> <li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
</ul> </div></body></html><li> 7 </li>
3. js文件写在index.htmlde head中为了查看的方便
代码很简单,基本没有需要讲的代码。对你有用的话就拿去用吧。<script> $(function(){ $("#content .aside_left>li").hide(); $("#content .aside_left>li.conFocus").show(); $("#nav li").each(function(index){ $(this).click(function(){ $("#nav li.tabFocus").removeClass("tabFocus"); $(this).addClass("tabFocus"); $(".aside_left>li:eq("+index+")").show().siblings().hide(); }); }); }); </script>