欢迎光临
我的个人博客网站

jQuery TAB栏切换


代码实现:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         * {             margin: 0;             padding: 0;         }                  li {             list-style-type: none;         }                  .tab {             width: 978px;             margin: 100px auto;         }                  .tab_list {             height: 39px;             border: 1px solid #ccc;             background-color: #f1f1f1;         }                  .tab_list li {             float: left;             height: 39px;             line-height: 39px;             padding: 0 20px;             text-align: center;             cursor: pointer;         }                  .tab_list .current {             background-color: #c81623;             color: #fff;         }                  .item_info {             padding: 20px 0 0 20px;         }                  .item {             display: none;         }     </style>     <script src="https://blog-static.cnblogs.com/files/jacklzx/jquery.min.js"></script> </head>  <body>     <div class="tab">         <div class="tab_list">             <ul>                 <li class="current">商品介绍</li>                 <li>规格与包装</li>                 <li>售后保障</li>                 <li>商品评价(50000)</li>                 <li>手机社区</li>             </ul>         </div>         <div class="tab_con">             <div class="item" style="display: block;">                 商品介绍模块内容             </div>             <div class="item">                 规格与包装模块内容             </div>             <div class="item">                 售后保障模块内容             </div>             <div class="item">                 商品评价(50000)模块内容             </div>             <div class="item">                 手机社区模块内容             </div>          </div>     </div>     <script>         $(function() {             $(".tab_list li").click(function() {                 $(this).addClass("current").siblings().removeClass("current");                 var index = $(this).index();                 $(".tab_con .item").eq(index).show().siblings().hide();             });         });     </script> </body>  </html> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery TAB栏切换
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏