jQuery实现点击按钮内嵌内容切换

2020-03-23  本文已影响0人  一枚小菜
  <div class="main-nav-3">
         <ul>
              <li class="cur">内饰专业清洁</li>
              <li>皮革保湿养护</li>
              <li>内饰杀菌除味</li>
              <li>玻璃结晶镀膜</li>
              <li>轮毂复新</li>
         </ul>
  </div>
 <div class="neirong-box">
                   <div class="s-box">
                       <div class="text">
                           <span>内饰专业清洁</span>
                       </div>
                       <div class="img-boxs">
                           <div class="img-box">
                               <div class="box">
                                   <img src="static/img/tese.jpg">
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="s-box">
                       <div class="text">
                           <span>皮革保湿养护</span>
                       </div>
                       <div class="img-boxs">
                           <div class="img-box">
                               <div class="box">
                                   <img src="static/img/tese-2.jpg">
                               </div>
                           </div>
                       </div>
                   </div>
                </div>

以下是js代码:

  //内容随按钮变化而改变
    $(function () {
        $('.main-nav-3 li').click(function () {
            $(this).addClass('cur').siblings().removeClass('cur');
            $(".neirong-box .s-box").eq($(this).index()).show().siblings().hide();
        })
    })

addClass方法点击li标签时,把样式cur加到li标签中
removeClass方法点击别的li标签时,把样式cur移除
点哪个li标签.neirong-box .s-box类选择器中的内容就添加进去

上一篇 下一篇

猜你喜欢

热点阅读