jquery 简单应用

一、jq下实现点击 li 后content部分切换， li 的样式改变

1.插入jquery

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

2、HTML代码

 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>

3、css代码

 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;}

4、jQuery实现trans效果

方法1

 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 })

方法2

为每个li及其对应的div设置id值，例：第一个 li 的id设为"first";div设为"firstdiv"

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     })

5、实现效果