零基础学做网站培训介绍

当前位置:

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样式类。这样就实现了点击后当前样式改变的效果了。

发表评论

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

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 在学做网站论坛前面的教程:wordpress制作符合Bootstrap的导航栏菜单(带二级菜单),我们可以制作出带有二级下拉菜单的导航。但是有的建网站学员在制
  • 通过复选框选择相应的value值并进行计算,在一些功能上需要用到。如下图:下面是jquery获取选中复选框值并计算功能的代码:[cce_html]<
  • 在做网站时,有些栏目元素有选择性,当我们点击某个栏目时,它会显示出不同于其它的样式,而没有被点击的,就恢复正常样式。效果如下图:怎么
  • 在做网站时,在select选择框中,往往需要获取select被选中option的value和text的值,并且传给其它位置使用。获取select被选中option的value和text的值
  • 在企业网站制作时,需要在网站的边栏列出企业产品分类,如果公司网站产品项目很多的情况,就需要设置二级分类或者子分类。如下图:如何在自己
  • 在使用wordpress建网站时,往往需要在侧边栏调用当前栏目的子分类子目录,而且在点击子目录时,还会侧边栏显示这些子目录的分类。在wp程序下,
  • 很多网站都会在顶部显示实时的日期,时间,而且时间可以根据自己电脑的时间自动的更新。就像网站上装了一个时钟一样,当用户进入我们做的网站时就会看
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • page页面可以单独使用不同页面模板,这个我们都知道了,那怎么给不同的single文章页面设计不同模板呢?我们有二种方法: 第一种:通过代码来判断
  • 使用WP程序制作门户网站时,需要调用网站头条新闻,让第一个文章标题与其它的标题不一样,以形成新闻头条的效果。如下图:如何使用wp网站代码