当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery实现的简易tab标签自动切换效果

jQuery实现的简易tab标签自动切换效果

2020年07月22日  | 移动技术网IT编程  | 我要评论
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="assets/js/jquery-1.10.2.js"></script>
  7.         <style>
  8.             .tacon{display: none;margin: 15px 30px;border: 1px solid #aaa;height: 200px;width: 300px;}
  9.             .tacon.select{display: block;}
  10.             .qhxg{overflow: hidden;list-style: none;}
  11.             .qhxg li{float: left;margin:0 10px;padding: 0 20px;}
  12.             .qhxg li.active{color: red;}
  13.         </style>
  14.         <script>
  15.             var index = 0;
  16.             $(function(){
  17.                 $(".qhxg li").click(function(){
  18.                     index = $(this).index();
  19.                     $(this).addClass("active").siblings("li").removeClass("active");
  20.                     $(".tacon").eq(index).addClass("select").siblings(".tacon").removeClass("select");
  21.                 });
  22.                 setInterval(function(){
  23.                     var len = $(".qhxg li").length;
  24.                     $('.qhxg li').eq(index+1).trigger('click');
  25.                     if(index>=len-1){
  26.                         index = -1;
  27.                     }
  28.                 },2000);
  29.             });
  30.         </script>
  31.     </head>
  32.     <body>
  33.         <ul class="qhxg">
  34.             <li class="active">tab1</li>
  35.             <li>tab2</li>
  36.             <li>tab3</li>
  37.         </ul>
  38.         <div class="tacon select">
  39.             haihaovdgds
  40.         </div>
  41.         <div class="tacon">
  42.             中文
  43.         </div>
  44.         <div class="tacon">
  45.             中gdsgdsg文
  46.         </div>
  47.     </body>
  48. </html>

本文地址：https://blog.csdn.net/yangyanhua1163706017/article/details/107488875

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网