切换导航
首页
技术问答
编程语言
前端开发
移动开发
开发工具
程序设计
行业应用
CMS系统
服务器
频道导航
▸ PHP
▸ Java
▸ Java SE
▸ Python
▸ C#
▸ C&C++
▸ Ruby
▸ VB
▸ asp.Net
▸ Go
▸ Perl
▸ netty
▸ Django
▸ Delphi
▸ Jsp
▸ .NET Core
▸ Spring
▸ Flask
▸ Springboot
▸ SpringMVC
▸ Lua
▸ Laravel
▸ Mybatis
▸ Asp
▸ Groovy
▸ ThinkPHP
▸ Yii
▸ swoole
▸ HTML
▸ HTML5
▸ JavaScript
▸ CSS
▸ jQuery
▸ Bootstrap
▸ Angularjs
▸ TypeScript
▸ Vue
▸ Dojo
▸ Json
▸ Electron
▸ Node.js
▸ extjs
▸ Express
▸ XML
▸ ES6
▸ Ajax
▸ Flash
▸ Unity
▸ React
▸ Flex
▸ Ant Design
▸ Web前端
▸ 微信小程序
▸ 微信公众号
▸ iOS
▸ Android
▸ Swift
▸ Hybrid
▸ Cocos2d-x
▸ Flutter
▸ Xcode
▸ Silverlight
▸ cocoa
▸ Cordova
前端之家
Web前端
js实现的点击超链显示隐藏层
js实现的点击超链显示隐藏层
2019-12-18
Web前端
前端之家
前端之家
收集整理的这篇文章主要介绍了
js实现的点击超链显示隐藏层
，
前端之家
小编觉得挺不错的，现在分享给大家，也给大家做个参考。
点击
链接
，
显示
提示
框，
提示
框里也有
链接
可点击.
鼠标移开
链接
或者移开
提示
框，
提示
框就隐藏。
下面这个我写的不能自适应，如果
菜单
左对齐，
显示
层能否
自动
在右边
显示
？应该怎样调整JS？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <style> body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decoration:none;cursor:pointer;} #link-url a:hover {background:#ccc;} #d-k{position:relative; margin:0px 0px 0px 0px;z-index:0;} #Layer1,#Layer2,#Layer3,#Layer4,#Layer5{position:absolute; left: 70px; top: 0px;right:70px;} #show-k{margin:0px 0px 0px 0px;position:relative;background-color:#000; border:#ccc 1px solid; height:100px;z-index:3;filter:alpha(opacity=70);opacity:0.7; width:500px;} </style> <script language="javascript"> function change(x) {document.getElementById(x).style.display ="none";} function onClick<a href="/tag/Box/" target="_blank" class="keywords">Box</a>(y){document.getElementById(y).style.display ="";} function onMou<a href="/tag/SEO/" title="SEO">SEO</a>ut<a href="/tag/Box/" target="_blank" class="keywords">Box</a>(z){document.getElementById(z).style.display ="none";} function onMou<a href="/tag/SEO/" title="SEO">SEO</a>ver<a href="/tag/Box/" target="_blank" class="keywords">Box</a>(a){document.getElementById(a).style.display ="";} </script> <body> <div id="link-url" > <table width="400" cellspacing="5"> <tr> <td> <div id="d-k"> <a onclick="onClickbox('Layer1');" onMouseOut="onMouseOutbox('Layer1')">我点击一</a> <div id="Layer1" style="display:none;" onMouseOver="onMouseOverbox('Layer1')" onMouseOut="onMouseOutbox('Layer1')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>1sty人的和lesdf人的和人的和11</td> <td>人的和人的和人的和人的和人的和</td> <td>33人的和人的和人的和人的和3</td> <td>44人的和人的和人的和人的和人的和人的和人的和人的和4</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer2')" onMouseOut="onMouseOutbox('Layer2')">我点击一</a> <div id="Layer2" style="display:none;" onMouseOver="onMouseOverbox('Layer2')" onMouseOut="onMouseOutbox('Layer2')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer2')">111</a></td> <td><a href="#" onClick="change('Layer2')">222</a></td> <td><a href="#" onClick="change('Layer2')">333</a></td> <td><a href="#" onClick="change('Layer2')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer3')" onMouseOut="onMouseOutbox('Layer3')">我点击一</a> <div id="Layer3" style="display:none;" onMouseOver="onMouseOverbox('Layer3')" onMouseOut="onMouseOutbox('Layer3')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer3')">111</a></td> <td><a href="#" onClick="change('Layer3')">222</a></td> <td><a href="#" onClick="change('Layer3')">333</a></td> <td><a href="#" onClick="change('Layer3')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer4')" onMouseOut="onMouseOutbox('Layer4')">我点击一</a> <div id="Layer4" style="display:none;" onMouseOver="onMouseOverbox('Layer4')" onMouseOut="onMouseOutbox('Layer4')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer4')">111</a></td> <td><a href="#" onClick="change('Layer4')">222</a></td> <td><a href="#" onClick="change('Layer4')">333</a></td> <td><a href="#" onClick="change('Layer4')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer5')" onMouseOut="onMouseOutbox('Layer5')">我点击一</a> <div id="Layer5" style="display:none;" onMouseOver="onMouseOverbox('Layer5')" onMouseOut="onMouseOutbox('Layer5')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer5')">111</a></td> <td><a href="#" onClick="change('Layer5')">222</a></td> <td><a href="#" onClick="change('Layer5')">333</a></td> <td><a href="#" onClick="change('Layer5')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> </table> </div> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
左对齐
效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <style> body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decoration:none;cursor:pointer;} #link-url a:hover {background:#ccc;} #d-k{position:relative; margin:0px 0px 0px 0px;z-index:0;} #Layer1,#Layer5{position:absolute; left: 70px; top: 0px;right:70px;} #show-k{margin:0px 0px 0px 0px;position:relative;background-color:#000; border:#ccc 1px solid; height:100px;z-index:3;filter:alpha(opacity=70);opacity:0.7; width:500px;} </style> <script language="javascript"> function change(x) {document.getElementById(x).style.display ="none";} function onClick<a href="/tag/Box/" target="_blank" class="keywords">Box</a>(y){document.getElementById(y).style.display ="";} function onMou<a href="/tag/SEO/" title="SEO">SEO</a>ut<a href="/tag/Box/" target="_blank" class="keywords">Box</a>(z){document.getElementById(z).style.display ="none";} function onMou<a href="/tag/SEO/" title="SEO">SEO</a>ver<a href="/tag/Box/" target="_blank" class="keywords">Box</a>(a){document.getElementById(a).style.display ="";} </script> <body> <div id="link-url" > <table width="400" align="right" cellspacing="5"> <tr> <td> <div id="d-k"> <a onclick="onClickbox('Layer1');" onMouseOut="onMouseOutbox('Layer1')">我点击一</a> <div id="Layer1" style="display:none;" onMouseOver="onMouseOverbox('Layer1')" onMouseOut="onMouseOutbox('Layer1')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>1sty人的和lesdf人的和人的和11</td> <td>人的和人的和人的和人的和人的和</td> <td>33人的和人的和人的和人的和3</td> <td>44人的和人的和人的和人的和人的和人的和人的和人的和4</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer2')" onMouseOut="onMouseOutbox('Layer2')">我点击一</a> <div id="Layer2" style="display:none;" onMouseOver="onMouseOverbox('Layer2')" onMouseOut="onMouseOutbox('Layer2')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer2')">111</a></td> <td><a href="#" onClick="change('Layer2')">222</a></td> <td><a href="#" onClick="change('Layer2')">333</a></td> <td><a href="#" onClick="change('Layer2')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer3')" onMouseOut="onMouseOutbox('Layer3')">我点击一</a> <div id="Layer3" style="display:none;" onMouseOver="onMouseOverbox('Layer3')" onMouseOut="onMouseOutbox('Layer3')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer3')">111</a></td> <td><a href="#" onClick="change('Layer3')">222</a></td> <td><a href="#" onClick="change('Layer3')">333</a></td> <td><a href="#" onClick="change('Layer3')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer4')" onMouseOut="onMouseOutbox('Layer4')">我点击一</a> <div id="Layer4" style="display:none;" onMouseOver="onMouseOverbox('Layer4')" onMouseOut="onMouseOutbox('Layer4')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer4')">111</a></td> <td><a href="#" onClick="change('Layer4')">222</a></td> <td><a href="#" onClick="change('Layer4')">333</a></td> <td><a href="#" onClick="change('Layer4')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id="d-k"> <a onClick="onClickbox('Layer5')" onMouseOut="onMouseOutbox('Layer5')">我点击一</a> <div id="Layer5" style="display:none;" onMouseOver="onMouseOverbox('Layer5')" onMouseOut="onMouseOutbox('Layer5')"> <div id="show-k"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" onClick="change('Layer5')">111</a></td> <td><a href="#" onClick="change('Layer5')">222</a></td> <td><a href="#" onClick="change('Layer5')">333</a></td> <td><a href="#" onClick="change('Layer5')">444</a></td> </tr> </table> </div> </div> </div> </td> </tr> </table> </div> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
您可能感兴趣的
文章
:
js菜单点击显示或隐藏效果的简单实例
Vue.js 点击按钮显示/隐藏内容的实例代码
js点击页面其它地方将某个显示的DIV隐藏
vueJS简单的点击显示与隐藏的效果【实现代码】
javascript点击按钮实现隐藏显示切换效果
Js实现当前点击a标签变色突出显示其他a标签回复原色
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
javascript实现点击后变换按钮显示文字的方法
JAVASCRIPT 点击显示 隐藏层
js实现二级菜单点击显示当前内容效果
上一篇：JS/jQuery实现默认显示部分文字点击
下一篇：基于jQuery的烟花效果（运动相关）
猜你在找的Web前端相关文章
糟糕的设计会为我们的工作带来什么启发？
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开...
作者：前端之家 时间：2020-12-18
想实现多人协作的“在线Excel”？真没那么简单
本文由葡萄城技术团队原创并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开...
作者：前端之家 时间：2020-12-18
怎样使我们的用户不再抵触填写Form表单？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开...
作者：前端之家 时间：2020-12-18
不要再造轮子了：聊一聊 JavaScript 的 URL 对象是什么？
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处：葡萄城官网，葡萄城为开发者提供...
作者：前端之家 时间：2020-12-18
Deno会在短期内取代Node吗？
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开...
作者：前端之家 时间：2020-12-18
还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开...
作者：前端之家 时间：2020-12-18
SessionStorage、LocalStorage详解
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开...
作者：前端之家 时间：2020-12-18
详细了解JS Map，它和传统对象有什么区别？
一直以来，JavaScript使用数组和对象来定义和存放结构化数据， 在这篇文章中，我们将一起深...
作者：前端之家 时间：2020-12-18
合理使用CSS框架，加速UI设计进程
由于CSS的出现，现在的网站风格已经与它们很早之前的样子有了很大的不同。CSS的出现为原本...
作者：前端之家 时间：2020-12-18
开发一个渐进式Web应用程序（PWA）前都需要了解什么？
自苹果推出了iPhone应用商店以来，App成为了我们生活中不可或缺的一部分，而对于实体业务也...
作者：前端之家 时间：2020-12-18
编程分类
HTML
HTML5
JavaScript
CSS
jQuery
Bootstrap
Angularjs
TypeScript
Vue
Dojo
Json
Electron
Node.js
extjs
Express
XML
ES6
Ajax
Flash
Unity
React
Flex
Ant Design
Web前端
微信小程序
微信公众号
最新文章
• 糟糕的设计会为我们的工作
• 想实现多人协作的“在线Ex
• 怎样使我们的用户不再抵触
• 不要再造轮子了：聊一聊 J
• Deno会在短期内取代Node吗
• 您知道SASS吗？
• 还学的动吗？ 盘点下Vue.j
• SessionStorage、LocalSto
• 详细了解JS Map，它和传统
• 合理使用CSS框架，加速UI设
热门标签
更多 ►
关闭广告
单独headers
封装代码
提示错误
整数正则
非0开头
跳页
出页码
antd table
提示URL未注册
公众号支付
vue hash模式
iSlider
车牌键盘
循环图片
echarts 双折
左右布局
DllPlugin
对象创建
打字游戏
圈选
两栏
云函数
蒙版
ES2020
橱窗
无缝滚动轮播
色块碰撞
组件销毁
文档操作
