简洁明了Table选项卡

最新推荐文章于 2021-06-03 19:57:37 发布

慕纳兰

最新推荐文章于 2021-06-03 19:57:37 发布

阅读量337

点赞数

分类专栏：前端 jQuery 文章标签： table

本文链接：https://blog.csdn.net/qq_35927486/article/details/88343549

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Table选项卡</title>
       <style type="text/css">
           *{margin: 0;padding: 0;}
           ul{list-style: none;width: 100%;height: 45px;}
           ul li{height: 44px;width: 100px;border: 1px solid black;float: left;text-align: center;}
           #tab div{width: 500px;height: 300px;border: 1px solid black;display: none;}
       </style>
   </head>
   <body>

       <ul id="ul">
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ul>

       <div id="tab">
           <div style="display:block;">111111111111111</div>
           <div>222222222222222</div>
           <div>333333333333333</div>
       </div>

       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script type="text/javascript">
       $(function(){
           $("#ul").children("li").each(function(index,element){
               $(this).click(function(){
                   $($("#tab").children()[index]).css("display","block").siblings().css("display","none");
               });
           });
       });
       </script>
   </body>
</html>