js实现点击显示和隐藏特效代码

小秋同学 12-27 09:13:09 学习园地
摘要: 下面这一段代码,主要依靠JS代码,实现了点击一个链接,指定的区域就显示,再点击一下,指定的区域就隐藏,适合需要折叠显示或隐藏的地方使用。在使用这段代码之间,首先需要引入jquery。引入之后再添加如上代码即可:1、点击部分:<div>&l摘要: 下面这一段代码,主要依靠JS代码,实现了点击一个链接,指定的区域就显示,再点击一下,指定的区域就隐藏,适合需要折叠显示或隐藏的地方使用。在使用这段代码之间,首先需要引入jquery。引入之后再添加如上代码即可:1、点击部分:<div>&l

下面这一段代码,主要依靠JS代码,实现了点击一个链接,指定的区域就显示,再点击一下,指定的区域就隐藏,适合需要折叠显示或隐藏的地方使用。

js实现点击显示和隐藏特效代码(图1)

在使用这段代码之间,首先需要引入jquery。

引入之后再添加如上代码即可:

1、点击部分:

<div><a href="javascript:ClickToDisplay();" id="region">显示</a></div>

2、js核心部分:

<script type="text/javascript" charset="utf-8">//<![CDATA[var changeMsg = "显示";var closeMsg = "关闭";function ClickToDisplay() {  jQuery("#todisplay").slideToggle("slow", function(){    if ( jQuery("#todisplay").CSS("display") == "none" ) {      jQuery("#region").text(changeMsg);    } else {      jQuery("#region").text(closeMsg);    }  });}jQuery(document).ready(function(){  jQuery("#todisplay").hide();});//]]></script>

3、要显示和隐藏的区域:

<div id="todisplay">test</div>

上面代码主要是判断css的id,因为id唯一,别把id搞错了。


文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/925.html发布于 12-27 09:13:09
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就施舍一下文章作者

支付宝施舍

微施舍

阅读
分享
加入收藏

发表评论
加载中~