js 简单实用的点击可显隐层效果

提示:您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<title>简单实用的点击可显隐层</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<a href="javascript:;" id="Link">Click me!</a>
<div id="T" style="width:100px;height:100px;background:#F0F;display:none;"></div>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
$("Link").onclick=function(){$("T").style.display=$("T").style.display=="block"?"none":"block";}
document.onclick=function(e){
 e=window.event||e;
    obj = e.srcElement ? e.srcElement : e.target;
    if(obj.id!="Link"){
     $("T").style.display="none";
    }
}
</script>
</body>
</html>

提示:您可以先修改部分代码再运行

时间: 2024-08-02 19:59:53

js 简单实用的点击可显隐层效果的相关文章

JS实现从网页顶部掉下弹出层效果的方法_javascript技巧

本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法.分享给大家供大家参考.具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错. 运行效果如下图所示: 具体代码如下: <HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9

jQuery EasyTabs.js简单实用Tabs插件

今天分享一个jQuery 简单实用Tabs插件-EasyTabs.js. 官方地址: http://os.alfajango.com/easytabs/#tabs1-html EasyTabs.js 是一个轻松实现 Tabs 组件的 jQuery 插件,支持多种不同外观. 可以采用自带的样式也可以自定义样式. jQuery 1.4.3+ 支持一下浏览器: Internet Explorer 7+ Firefox 4+ Chrome Safari Opera 11   示例代码:  代码如下 复制

js 简单实用的图片放大效果

使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)_javascript技巧

在网站开发中,经常会简单使用js代码来判断字符串中有多少汉字的功能.今天小编抽时间给大家分享实现代码.废话不多说了,直接给大家贴代码了. $("form").submit(function () { var content = editor.getContentTxt(); var sum = 0; re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则 if (content) { if (re.test(content)) //使用正则判断是否存在中文 { if

js简单的点击返回顶部效果实现方法_javascript技巧

本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

JS简单实现点击复制链接的方法_javascript技巧

本文实例讲述了JS简单实现复制链接的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

js简单实现表单中点击按钮动态增加输入框数量的方法_javascript技巧

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

js实现简单实用的AJAX完整实例_AJAX相关

本文实例讲述了js实现简单实用的AJAX的方法.分享给大家供大家参考,具体如下: //版权归属 WUJXPING //ajax 1.2 //更新2012-2-20 //1.异步数据加载可以进行加载方式get,post的设定 //2.异步同步模式的属性设定 //3.数据加载自动超时设置 //4.***数据加载事件的添加,通过事件可以进行服务器数据的实时处理 //5.增加回调函数中用户自定义参数this.e //6.增加ajax反复提交控制,只需将ajax对象定义为全局变量,每次提交都会进行等待上次

JS简单模拟触发按钮点击功能的方法_javascript技巧

本文实例讲述了JS简单模拟触发按钮点击功能的方法.分享给大家供大家参考,具体如下: <html> <head> <title>usually function</title> </head> <script> function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); document.getElementById(&qu