jquery选项卡

最新推荐文章于 2021-05-28 11:36:53 发布

zjl2674802

最新推荐文章于 2021-05-28 11:36:53 发布

阅读量442

点赞数

分类专栏：自己

本文链接：https://blog.csdn.net/fly_zjl/article/details/8748261

版权

自己专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<html>
<head>
   <meta charset="utf-8"/>
   <style>
       *{margin:0;padding:0}
       body{font-size:15px;width:300px;margin:50px auto}
       .tab_menu ul li{list-style:none;float:left;width:50px;border:1px solid #ccc;line-height:30px;margin-left:20px;border-bottom:none;text-align:center;cursor:pointer}
       .tab_content{clear:both;border:1px solid silver;height:200px;margin-left:20px;padding-left:10px}
       .hide{display:none}
       .tab_selected{background:#aaa}
       .hover{background:#9f0}
   </style>
   <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
   <script>
       /*
           1,鼠标点击哪个栏目,内容框要显示该栏目对应的内容
           2,同时该栏目切换背景颜色
           3,鼠标移入移出改变背景颜色
       */
       $(function(){
           var $li = $("div.tab_menu ul li");
           $li.click(function(){
               //获得当前点击的元素在集合中的索引
               var $index = $li.index(this);
               $("div.tab_content div").eq($index).show().siblings().hide();
               $(this).addClass("tab_selected").siblings().removeClass("tab_selected");
           }).hover(function(){
               $(this).addClass("hover");
           },function(){
               $(this).removeClass("hover");
           });
       })
   </script>
</head>
<body>
   <div class="tab">
       <div class="tab_menu">
           <ul>
               <li class="tab_selected">时事</li>
               <li>体育</li>
               <li>娱乐</li>
           </ul>
       </div>
       <div class="tab_content">
           <div>时事</div>
           <div class="hide">体育</div>
           <div class="hide">娱乐</div>
       </div>
   </div>
</body>
</html>

zjl2674802

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选项卡

*{margin:0;padding:0} body{font-size:15px;width:300px;margin:50px auto} .tab_menu ul li{list-style:none;float:left;width:50px;border:1px solid #ccc;line-height:30px;margin-left:20px;
复制链接

扫一扫