jQuery选项卡实例

最新推荐文章于 2019-11-02 17:35:01 发布

郭晓湉

最新推荐文章于 2019-11-02 17:35:01 发布

阅读量1.5k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/xtqueen/article/details/8748020

版权

jQuery 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8"/>
<style>
  *{margin:0;padding:0}
   body{font-size:15px;width:300px;margin:100px auto}
  .tab_menu ul li{list-style:none;float:left;width:50px;border:1px solid #ccc;margin-left:5px;line-height:30px;border-bottom:none;text-align:center;cursor:pointer}
  .tab_content{clear:both;border:1px solid silver;height:200px;padding-left:10px}
  .hide{display:none}
  .tab_selected{background:#aaa}
  .hover{background:pink}
  .tab{border-style:dashed;}
</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>
                <li>新闻</li>
                <li>体育</li>

   </ul>
  </div>

</div>
</body>
</html>

郭晓湉

关注

0
点赞
踩
0

收藏

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

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

扫一扫

专栏目录