jQuery排他思想和修改样式操作类

最新推荐文章于 2024-10-02 05:39:15 发布

绯色云烟

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量116

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_59425810/article/details/129261980

版权

本文展示了使用jQuery实现的两种常见交互效果：当点击按钮时，被点击按钮变为粉色，其他按钮恢复原状；鼠标悬停在图片列表上时，对应的图片显示，其余隐藏。此外，还介绍了如何使用链式编程优化代码，并讲解了如何利用jQuery添加或移除类来实现tab切换功能。

摘要由CSDN通过智能技术生成

<script>
        //jQ排他思想，点哪个按钮，按钮变粉
        $(function(){
            $("button").click(function(){
                $(this).css("background","pink");
                $(this).siblings("button").css("background","");
            })
        })
</script>

案例：淘宝服饰，鼠标移动变换图片

<script>
        $(function(){
            $("#left li").mouseover(function(){
                var index=$(this).index();//获取li的索引号
                $("#content div").eq(index).show();//对应索引号的div图片显示出来
                $("#content div").eq(index).siblings().hide();//兄弟隐藏起来
            })
        })
</script>

链式编程：节约代码量，看起来更优雅，一定得注意是哪个对象的样式。

$(this).css("color","red").sibilings().css("color","");//两行变一行

jQuery修改样式操作类

作用等同于classList，可操作类样式，注意操作类里参数不加点，$括号里是加点的。

反复点击加入取消新类current

$(function(){
            $("div").click(function(){
                $(this).toggleClass("current");
            })
})

案例：tab栏切换

$(function(){
            $(".tab_list li").click(function(){
                //自身添加类，兄弟删除类
                $("this").addClass("current").siblings().removeClass("current");
                var index=$(this).index();
                //页面转换成对应参数的
                $(".tab_con .item").eq(index).show().siblings().hide();
            })
        })

$("button").eq(0)表示第一个button按钮；