零基础建站培训教程介绍

当前位置:

JQUERY实现点击选中改变当前样式

在做网站时,有些栏目元素有选择性,当我们点击某个栏目时,它会显示出不同于其它的样式,而没有被点击的,就恢复正常样式。效果如下图:

JQUERY实现点击选中改变当前样式

怎么在自己做网站时,实现这样的点击后改变当前样式的效果呢?这就需要使用JQUERY代码了。以下是JQUERY实现点击选中改变当前样式代码。


<script>
$("#meau_nav>div").click(function(){
    var index = $(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $(".redpacket-con").eq(index).show().siblings(".redpacket-con").hide();
});

</script>

代码解释:

#meau_nav>div 是id名为meau_nav的父DIV下面的DIV,它是被控制的对象;

active是样式类,需要在CSS里添加active的样式代码;

当鼠标点击#meau_nav>div的某一项时,就会自动添加active样式类,其它的DIV自动取消active样式类。这样就实现了点击后当前样式改变的效果了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注