jquery $.each()选项卡

最新推荐文章于 2022-01-04 15:46:51 发布

夏末_阳光依然耀眼

最新推荐文章于 2022-01-04 15:46:51 发布

阅读量141

点赞数

分类专栏： js 选项卡

原文链接：https://blog.csdn.net/Jouen521/article/details/79226570

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

选项卡

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery选项卡</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
      ul{
      margin:0;
      padding:0;
      list-style: none;
      }
      ul li{
      float:left;
      width:80px;
      height:40px;
      background: #eee;
      font-family: "微软雅黑";
      text-align: center;
      line-height: 40px;
      border:3px solid #f0f;
      } 
      #bottom{
      clear:left;
      width:430px;
      height:300px;
      background: #333;
      }
      #bottom div{
      display: none;
      }
      #bottom .bottom-show{  /*不写#bottom会该样式不会执行*/
      display: block;
      font-family: "微软雅黑";
      font-size: 20px;
      color:#f0f;
      }
      .title-show{
      border:3px solid #333;
      }
</style>
</head>
<body>
<div>
<ul id="title">
<li class="title-show">汽车</li>
<li>头条</li>
<li>八卦</li>
<li>娱乐</li>
<li>体育</li>
</ul>
<div id="bottom">
<div class="bottom-show">汽车</div>
<div>头条</div>
<div>八卦</div>
<div>娱乐</div>
<div>体育</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
           $(this).addClass("title-show").siblings().removeClass("title-show");
           $("#bottom>div:eq("+index+")").addClass("bottom-show").siblings().removeClass("bottom-show");
   })
   })
})
</script>
</html>