$(function()
{
$(".option").click(function()
{
$(this).addClass("active").siblings().removeClass("active");
})
})
这段代码是一个jQuery事件监听器,用于在页面上选择某个元素时添加/删除CSS类以改变样式。具体来说,该代码会监听class属性名为"option"的所有HTML元素的点击事件,并在点击时执行相应的回调函数。
当用户点击某个元素时,代码会首先使用jQuery的$(this)
方法获取到当前被点击的元素,在这个元素上调用addClass()
方法添加CSS类名"active"。接着,使用siblings()
方法获取该元素的兄弟元素,即其他class属性名为"option"的元素,然后再调用removeClass()
方法将兄弟元素上的"active"类名移除。这样,当用户选择某个元素时,被选择的元素会添加一个"active"类,其他元素则会移除该类。
通过这种方式,可以快速地在多个元素之间切换样式,实现类似于选项卡、列表菜单等交互效果。
需要注意的是,以上代码基于jQuery,确保已经引入了jQuery库才能运行。
.siblings()
是jQuery封装的一个DOM遍历方法,用于查找当前元素的所有兄弟元素。它返回一个新的jQuery对象,包含当前元素的所有兄弟元素。如果指定了选择器参数,则只返回符合选择器的兄弟元素。
具体地说,使用.siblings()
方法,可以在DOM树中遍历当前元素的相邻兄弟节点,并将这些兄弟节点组成一个新的jQuery对象返回。需要注意的是,这个jQuery对象不包含当前元素本身,仅包含其兄弟节点。因此,如果想要同时选择当前元素及其兄弟节点,可以使用.addBack()
方法添加当前元素到jQuery对象中。