jquery 选项卡 - 爱码网

<html>
   <head>
       <meta charset="utf-8" />
       <title>选项卡</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }
           .box {
               width: 500px;
               margin: 100px auto;
               border: 5px solid red;
           }
           .bar {
               width: 100%;
               height: 40px;
               text-align: center;
           }
           button {
               width: 100px;
               height: 40px;
               color: gold;
               font-size: 25px;
               border: none;
               cursor: pointer;
               outline: none;
           }
           .content div {
               width: 100%;
               height: 400px;
               background: green;
               font-size: 20px;
               display: none;
           }
           .bar .active {
               background: gray;
           }
           .content .show {
               display: block;
           }

       </style>
   </head>
   <body>
       <div class="box">
           <div class="bar">
               <button class="active">军事</button>
               <button>科技</button>
               <button>体育</button>
               <button>游戏</button>
           </div>
           <div class="content">
               <div class="show">驻欧美陆军前司令发警告，声称15年内“美国或将和中国开战”</div>
               <div>特斯拉电话会议：马斯克希望明年在中国建厂回避董事长人选问题</div>
               <div>正视频播湖人vs太阳哈登伤退火箭连败</div>
               <div>LCS赛区全明星出炉：Caps和欧成，大师兄和女装大佬！</div>
           </div>
       </div>
   </body>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
   <script>

       $(function(){

           // 记录当前索引
           var selectedIndex = 0
           var aButton = $('button')

           aButton.click(function(){
               // 给当前按钮添加active，移除其他同胞的active
               $(this).addClass('active').siblings().removeClass('active')
               // 计算当前对象在数组中的位置(序号)
               var index = aButton.index(this)
               // 给对应的div添加show，移除其他同胞的show属性
               $('.content div').eq(index).addClass('show').siblings().removeClass('show')
               // 更新当前索引
               selectedIndex = index
           })

           var timer = null

           start()

           function start()
           {
               timer = setInterval(function(){
                   if (++selectedIndex == aButton.length) {
                       selectedIndex = 0
                   }
                   aButton.eq(selectedIndex).addClass('active').siblings().removeClass('active')
                   $('.content div').eq(selectedIndex).addClass('show').siblings().removeClass('show')
               }, 2000)
           }

           // 光标移入移出事件
           $('.box').hover(function(){
               // 清除定时器
               clearInterval(timer)
               timer = null
           },function(){
               // 重新开始自动轮播
               start()
           })
       })

   </script>
</html>

jquery 选项卡