jQuery的Tab选项卡代码

longjunx

已于 2023-04-09 14:46:43 修改

阅读量145

点赞数

文章标签： jquery javascript 前端

于 2023-04-08 20:34:11 首次发布

本文链接：https://blog.csdn.net/longjunx/article/details/130034159

版权

该代码示例展示了如何使用HTML、CSS和JavaScript（jQuery库）创建一个动态的Tab切换功能。当用户鼠标悬停在Tab列表项上时，当前项会添加current类，其他项移除该类，同时根据当前选中的Tab索引显示相应的内容块。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery.min.js">   </script>
       <style type="text/css">
           *{
               margin: 0;padding: 0;list-style-type: none;
               text-decoration: none;
           }
           .tab{
               margin: 0 auto;
               width: 800px;
               height: 500px;
           }
           .tab_list{
               width: 590px;
               height: 39px;

               border: 1px solid #ccc;
               background-color: #CCCCCC;
           }
           .tab_list li{
               float: left;
               width: 78px;
               height: 39px;
               line-height: 39px;
               padding: 0 20px;
               text-align: center;
               cursor: pointer;
               font-size: 12px;
           }

           .tab_list .current{
               background-color: red;
               color: #fff;
           }
           .item_info{
               padding: 20px 0 0 20px;
           }
           .item{
               display: none;
           }
       </style>
   </head>
   <body>
       
       <div class="tab">
           <div class="tab_list">
               <ul>
                   <li class="current">商品介绍</li>
                   <li>规格与包装</li>
                   <li>售后保障</li>
                   <li>商品评价</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">
                   商品评价模块内容
               </div>
               <div class="item">
                   手机社区模块内容
               </div>
           </div>
       </div>

       <script type="text/javascript">
       //1.点击上部的li,当前的li添加current类,其余兄弟移除类

       $(function(){
           $('.tab_list li').mouseover(function(){
               //排他思想链式编程操作
               $(this).addClass('current').siblings().removeClass('current');
               //2.点击的同时,得到当前i的索引号
               var index=$(this).index();//拿到当前索引号
               console.log(index);
               //3.让下部里面响应索引号item显示,其余item隐藏
               $('.tab_con .item').eq(index).show().siblings().hide();
           })
       })



       </script>
   </body>
</html>