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

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

收藏 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-data的三种用法

微信小程序实战之自定义toast（6）

微信小程序--onShareAppMessage分享参数用处(页面分享)

微信小程序实战之自定义抽屉菜单（7）

微信小程序开发之从相册获取图片使用相机拍照本地图片上传

JavaScript错误处理和堆栈追踪详解

微信小程序开发之麦克风动画帧动画放大淡出

微信小程序实战之自定义模态弹窗（8）

jQuery加密密码到cookie的实现代码

javascript实现日期三级联动下拉框选择菜单

网络赚钱

站长故事

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

Jquery-data的三种用法

微信小程序实战之自定义toast（6）

微信小程序--onShareAppMessage分享参数用处(页面分享)

微信小程序实战之自定义抽屉菜单（7）

微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

JavaScript错误处理和堆栈追踪详解

微信小程序开发之麦克风动画 帧动画 放大 淡出

微信小程序实战之自定义模态弹窗（8）

jQuery加密密码到cookie的实现代码

javascript实现日期三级联动下拉框选择菜单

网络赚钱

站长故事

微信小程序开发之从相册获取图片使用相机拍照本地图片上传

微信小程序开发之麦克风动画帧动画放大淡出