在线演示地址: 评论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>
<li> 7 </li>
</ul> </div></body></html>
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>
代码很简单,基本没有需要讲的代码。对你有用的话就拿去用吧。