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的样式代码；
• index() 方法返回指定元素相对于其他指定元素的 index 位置。
• addClass() 方法是添加一个class类名；
• siblings() 方法返回被选元素的所有同级元素。
• removeClass() 方法是去除一个class类名；
• eq(index) 选择器选取带有指定 index 值的元素；

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

不同页面超链接跳转

<script>

var navlist = $(".n_nav a");

var turl=window.location.href;

for(var t=1;t<(navlist.length+1);t++){

if($(".n_nav a:nth-of-type("+t+")").attr('href') == turl){

$(".n_nav a:nth-of-type("+t+")").addClass('on');

}

}

</script>