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

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

收藏 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实现的点击超链显示隐藏层

微信小程序对接七牛云存储的方法

jquery easyui如何实现格式化列

关于前后端json数据的发送与接收详解

Angular.js中上传指令ng-upload的基本使用教程

利用JavaScript如何查询某个值是否数组内

webpack实现热加载自动刷新的方法

Vue的Flux框架之Vuex状态管理器

Angular.js中$resource高大上的数据交互详解

webpack配置sass模块的加载的方法

Vue框架中正确引入JS库的方法介绍

网络赚钱

站长故事