美文网首页
jQuery实现点击按钮内嵌内容切换

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

作者: 一枚小菜 | 来源:发表于2020-03-23 22:58 被阅读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类选择器中的内容就添加进去

相关文章

  • 用 jQuery 做个轮播

    初次体验jQuery 之后,体验一下jQuery强大之处,做一个简单的轮播,实现图片切换。 点击按钮切换轮播 页面...

  • Axure实现点击切换面板显隐

    概述 Axure中实现点击一个按钮,按钮状态切换,并切换面板的显隐。 效果 实现后如下图所示: 实现 切换到概要面...

  • Asp.net Mvc异步

    MainContent:Jquery异步,Asp.net Mvc异步完成:点击按钮更新时间 Jquery异步实现 ...

  • 在简书中如何引用代码

    算啦,先看图 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击左右按钮实现切换点击下标焦点实现切换1、首先实...

  • 小程序web-view在线查看pdf文件

    项目中碰到是一个需求是查看列表详情,详情的内容是PDF文件。初步实现思路是点击详情按钮打开内嵌web-view,在...

  • jQuery实现点击上下按钮对列表重新排序

    jQuery实现点击上下按钮对列表重新排序效果链接:https://sunguangqing.github.io/...

  • jQuery点击图片来回切换功能

    在项目里,有时候会写这样的开关效果,点击开关来回切换,也就是jquery实现点击图片切换为另一图片,再次点击恢复到...

  • jQuery-初窥jQuery工作原理

    目的:了解jQuery的工作原理 相关链接 源码链接 预览链接 实现功能: 点击按钮一,修改所有div样式 点击按...

  • VUE实现按钮点击切换颜色

    首先设置参数初始值 首先根据条件判断 style="choseValue == 'choseone'?mapSty...

  • jQuery实现点击按钮滚动元素

    最近做项目做到一个功能是用左右按钮取代进度条滚动,网上没有类似的dome就自己写了一个,挺简单不难,废话不多说直接...

网友评论

      本文标题:jQuery实现点击按钮内嵌内容切换

      本文链接:https://www.haomeiwen.com/subject/lqeiyhtx.html