首页 > 其他 > 详细

JQ实现选项卡切换

时间:2020-04-06 12:47:57      阅读:66      评论:0      收藏:0      [点我收藏+]

使用JQuery实现选项卡切换:触发添加和删除类名!

html代码

            <div>
                        <div class="ig">
                            <img src="images/dl1.jpg" >
                            <div class="video-btn">
                                <p>Watch video</p>
                                <a href=""><i></i></a></div>
                        </div>
                    </div>
                    <ul>
                        <li>
                            <a href=""><i></i>5 year quality guarantee</a>
                        </li>
                        <li class="into">
                            <a href=""><i></i>Full redund policy for bad items </a>
                        </li>
                        <li>
                            <a href=""><i></i>LEAD-TIME GURANTEE</a>
                        </li>
                    </ul>

  

JQ代码:鼠标移动触发

$(‘ul li‘).mousemove(function() {
                    $(this).addClass(‘into‘).siblings().removeClass(‘into‘); //给当前元素添加类名:into,并且删除其兄弟元素的类名:into
                    var index = $(this).index();  //获得当前元素的下标(序号),使得切换的时候一一对应
             // 当前元素的 父元素的 兄弟元素的 子元素:ig的子元素:img 更改其属性值: src $(this).parent().siblings().children(‘.ig‘).children(‘img‘).attr(‘src‘,‘http://vue.wuliwu.top/upload/20200327105102551.jpg‘); })

  

仅供参考!

 

解释的有点生硬,直接上图:

当鼠标移动的时候右侧选项卡背景变为白色,左侧图片更改

技术分享图片

 

JQ实现选项卡切换

原文:https://www.cnblogs.com/chalkbox/p/12641128.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!