TAB切换

最新推荐文章于 2024-03-02 23:16:06 发布

原创最新推荐文章于 2024-03-02 23:16:06 发布 · 186 阅读

CC 4.0 BY-SA版权

<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>tab切换</title>
   <script src="jquery.1.12.js"></script>
   <style>
        *{
           margin:0;
           padding:0;
        }
   .box ul{
       width:240px;
       border:1px solid #abc;
   }
   body{
      margin: 30px 20px;

   }
      li{
       list-style: none;/*左侧点去掉*/
      }
      .box ul li{
       width:58px;
       height:30px;
       float:left;
       border:1px solid #abcdef;
       line-height: 30px;
       text-align: center;
       cursor: pointer;
       margin-left: 1px;

      }
      .box .content{
       width:240px;
       margin-top: 40px;
        border:1px solid #abcdef;
      }
      .box .current{
       background: #000;
       color:#fff;
      }
   </style>
</head>
<body>
   <div class="box">
        <ul>
              <li class="current">PHP</li>
              <li>MYSQL</li>
              <li>HTML</li>
              <li>JQUERY</li>
        </ul>
          <div class="content">
              <div>PHP是世界上最好的语言</div>
              <div style="display:none;">mysql功能特别强大</div>
              <div style="display:none;">html也是非常强大的，比如html5</div>
              <div style="display:none;">jquery可以实现多种效果</div>
          </div>
   </div>

</body>
<script>
   $(function(){
       $(".box ul li").click(function(){
           //点击当前元素追加上current样式，同时将兄弟元素的样式去除
           $(this).addClass("current").siblings().removeClass("current");
           //获取当前索引
           var _index=$(this).index();
               //点击后div里的当前元素显示
           $(".content div").eq(_index).show().siblings().hide();
       })
   })

</script>
</html>