jquery 简单应用

1 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

 1     <div class="menu">
 2         <ul class="trans">
 3             <!--注意current应为li的class-->
 4             <li class="current"><a href="javascript:;">首页</a></li>
 5             <li><a href="javascript:;">关于我们</a></li>
 6             <li><a href="javascript:;">新闻中心</a></li>
 7             <li><a href="javascript:;">主营业务</a></li>
 8         </ul>
 9     </div>
10     <div class="wrap">
11         <div class="cont" style="display:block">
12             <p>就撒谎空间大水库的建设撒旦奈何阿克苏你的空间撒旦卡上登记卡少女就撒谎空间大水库的建</p>
13         </div>
14         <div class="cont">
15             <p>就撒谎空间大水库的建设撒旦奈何间撒旦卡少女</p>
16         </div>
17     </div>

 1 *{margin:0;padding:0}
 2 body{font-family:"微软雅黑";font-size:14px;color:#7e7e7e;}
 3 li{list-style:none;}
 4 /*======body内的color值不能改变<a>的初始颜色，应在全局<a>中再定义======*/
 5 a{text-decoration:none;color:#7e7e7e;}
 6 /*=========全局样式结束============*/
 7 
 8 .menu{width:100%;}
 9 .menu ul{width:800px;margin:20px auto;overflow:hidden;}
10 /*由于ul子元素li全部float无法撑开ul，为ul设置margin-bottom将无效。
11   解决方法为其设置overflow:hidden;就可以达到想要的效果*/
12 .menu li{float:left;}
13 .menu li a{padding:0 30px;}
14 /*current是li的class，为改变li下<a>的颜色应设置current下的a颜色*/
15 .current a{color:#1e96d5;}
16 .menu li a:hover{color:#1e96d5;}
17 .wrap{width:800px;margin:0 auto;}
18 .cont{display:none;}

 1 $(function(){
 2     $(".trans li").each(function(index) {
 3         $(this).click(function(){
 4                 var index=$(".trans li").index(this);
 5                 $(".cont")
 6                 .eq(index).show()
 7                 .siblings().hide();
 8                 $(".trans li").removeClass("current");  
 9                 $(".trans li").eq(index).addClass("current");
10             });
11     });
12 })

1 $(function(){
2         $(".trans li").click(function(){
3                 var idname=$(this).attr("id");
4                 $(".wrap").find(".cont").hide();
5                 $(".wrap").find("#"+idname+"div").show();
6             })
7     })