教你如何用jquery做网页“百叶窗”特效,即同一个区域内,根据点击不同的按钮或链接显示不同的内容的特效推荐 亲测 原创


  • :
  • 03-16 14:45
  • :
  • 145次
  • :
  • 0条
  • 5赞

简介用jquery制作网页百叶窗特效的方法代码及在线实例展示。

使用jquery可以大大的缩减我们编写代码的时间,就好比本章要说的网页“百叶窗”特效,如果要用js来做的话,可能需要几十行的代码,但是用jquery来做的话,只需要两三行代码就OK了!

大家可以先点击下面的链接查看站长做的一个在线实例演示:

jquery做的最简单的百叶窗效果展示

下面是上面在线实例的截图:

下面站长来和大家讲解一下其中的核心代码:

<script language="JavaScript">
$("button").click(function(){	
    var id=$(this).attr("id");	
    $(this).addClass("on").siblings("button.on").removeClass("on");	
    $("#"+id+"_info").show().siblings("div:visible").hide();
});
</script>

$(this).addClass("on").siblings("button.on").removeClass("on");

这一句的意思是:为当前的标签添加“on”样式,然后获取同辈中带有“on”样式的button标签,再去除掉获取到的标签的on样式。

$("#"+id+"_info").show().siblings("div:visible").hide();

这一句的意思是:显示获取到的标签,然后获取同辈中处于可见状态的div标签,然后隐藏起来。

jquery就是这么强大,短短两行代码就能让我们实现网页中看似复杂的“百叶窗”特效!



您正在找的文章可能是: