js实现的点击超链显示隐藏层

所属分类：网络编程 / JavaScript 阅读数： 567

收藏 0赞 0分享

点击链接，显示提示框，提示框里也有链接可点击.
鼠标移开链接或者移开提示框，提示框就隐藏。

下面这个我写的不能自适应，如果菜单左对齐，显示层能否自动在右边显示？应该怎样调整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>   <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>   <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中用webpack打包之后运行文件的问题以及相关配置方法

把vue-router和express项目部署到服务器的方法

Vue 2.5.2下axios + express 本地请求404的解决方法

vue和react等项目中更简单的实现展开收起更多等效果示例

vue webpack打包优化操作技巧

在vscode中统一vue编码风格的方法

vue+iview+less+echarts实战项目总结

深入理解ES6中let和闭包

浅谈用Webpack路径压缩图片上传尺寸获取的问题

webpack将js打包后的map文件详解

网络赚钱

站长故事