JQuery编写选项卡

最新推荐文章于 2021-11-12 15:03:09 发布

宇恒ngIf

最新推荐文章于 2021-11-12 15:03:09 发布

阅读量228

点赞数

分类专栏： JQ 文章标签： jquery 选项卡

本文链接：https://blog.csdn.net/qq_36369717/article/details/53163673

版权

JQ 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }

           ul{
               list-style: none;
           }

           .btn{
               width: 500px;
               height: 26px;
           }

           .btn li{
               float: left;
               height: 26px;
               padding: 0 16px;
           }

           .pic{
               width: 488px;
               padding: 6px;
               background: #ABCDEF;
           }

           .hide{
               display: none;
           }

           .show{
               display: block;
           }

           .hover{
               color: #fff;
               background: #ABCDEF;
               border: 1px solid #ABCDEF;
               border-bottom: none;
           }

           .normal{
               color: #000;
               background: #ddd;
               border: 1px solid #ABCDEF;
               border-bottom: none;
           }

       </style>
       <script type="text/javascript" src="js/jquery-2.2.0.js"></script>
       <script type="text/javascript">
           $(function(){
               $btn_li = $(".btn li");
               $pic_li = $(".pic li");

               $btn_li.addClass('normal');
               $btn_li[0].className ='hover';

               $pic_li.addClass('hide');
               $pic_li[0].className = 'show';

               $btn_li.mouseover(function(){
                   var index = $(this).index();
                   $btn_li.removeClass().addClass('normal');
                   $(this).removeClass().addClass('hover');
                   $pic_li.removeClass().addClass('hide');
                   $pic_li.eq(index).removeClass().addClass('show');
               });
           });
       </script>
   </head>
   <body>
       <div>
           <ul class="btn">
               <li>tab1</li>
               <li>tab2</li>
               <li>tab3</li>
           </ul>
           <ul class="pic">
               <li><img src="img/1.jpg"/></li>
               <li><img src="img/3.jpg"/></li>
               <li><img src="img/5.jpg"/></li>
           </ul>
       </div>
   </body>
</html>