零基础学做网站培训介绍

当前位置:

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

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

发表评论

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

相关教程

  • 一些网站的栏目比较多,例如在制作门户网站时,如果想在一个页面上显示更多的内容又不增加页面篇幅,最有效的方法就是使用tab标签切换来显示。效果如
  • jquery 添加html到DIV的方法有很多,先介绍一下原生JS追加html到DIV的方法:<script>window.onload = function() {var testd
  • 这是一个适用于各类网站的通栏轮播焦点图,尺寸是自动适应于用户的屏幕尺寸。而且代码简单,功能齐全,是我们自己建网站时随拿随用的网站通栏轮播焦点
  • 在之前的建站教程中,我们介绍了JQUERY实现网页缓慢返回顶部的方法,这种方法是在JQUERY的基础上实现的。今天学做网站论坛要介绍一个网页缓慢返回顶部
  • 当网站的版面过长时,用户会使用下拉条进行拖动浏览,当到达第一屏的时候,会出一个“返回顶部”的图标,鼠标放在返回顶部图标上图标颜色变深鼠标点击后
  • 学习了HTML教程,我们知道,现在可以直接使用video标签来播放视频、音频。例如学做网站论坛的所有零基础建站教程都是采用HTML5的video标签来播放的。
  • 在学习网站制作课程时,有同学咨询如何实现点击网页上的按钮,可以复制指定的内容。这是一种jquery点击按钮复制内容功能,通过JQUERY可以实现点击后自
  • 我们在制作一些图片网站,由于图片比较多的情况,可以使用先让用户看到一些图片的缩略图,然后通过光标移动到小图后,显示大图的效果,就叫做图片相册
  • 为了让手机用户浏览网站的方便,我们做网站时,会做响应式自适应网站。可以自动判断用户浏览设备进行转换网站版面。如果用户使用手机浏览就跳转到手机
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个