tab切换案例

做个简单的tab切换效果，分别于jquery和js操作
（1）jQuery操作
先看下效果：
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style type="text/css">
        *{box-sizing:border-box;padding: 0;margin: 0}
        ul{width: 100%;height: 50px;text-align: center;margin: 10px 0;}
        ul li{list-style: none;height: 100%;width: 100px;
          line-height: 50px;text-align: center;background-color: #9c8b8b;
          margin: 0 6px;display: inline-block;cursor: pointer;}
        section{width: 600px;height: 300px;border: 1px solid red;margin: 100px auto;}
        #area{width: 400px;height: 200px;margin: 10px auto;border: 1px solid red;}
        .child{width: 100%;height: 100%;float: left;display: none;text-align: center;line-height: 200px;font-size: 20px;color: black;}
        .active{display: block}
        #area .child:nth-child(1){
          background-color: red;
        }
        #area .child:nth-child(2){
          background-color: green;
        }
        #area .child:nth-child(3){
          background-color: blue;
        }
        #area .child:nth-child(4){
          background-color: yellow;
        }
    </style>
</head>  
<body>  
<section>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <div id="area">
    <div class="child active">
      内容一
    </div>
    <div class="child">
      内容二
    </div>
    <div class="child">
      内容三
    </div>
    <div class="child">
      内容四
    </div>
  </div>
</section>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>  
    $(function(){
      $("ul li").on('click',function(){
        var index = $(this).index();
        $(".child").each(function() {
          if (index == $(this).index()) {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
          }
        })
      })
    })
</script>  
</body>  
</html>
（2）js操作
猜你喜欢
