黑马程序员技术交流社区

标题: 点击按钮修改HTML a标记的名称和链接 [打印本页]
作者: 董改名    时间: 2016-6-22 16:57
标题: 点击按钮修改HTML a标记的名称和链接
下面是代码，怎么点击修改按钮，弹出输入框，输入内容后，点击确定，然后下面的“淘宝”就变成其他的名称和链接。



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>

  7. <style>
  8. .box{
  9.     width:50%; margin-top:10%; margin:auto; padding:28px;
  10.     height:350px; border:1px #111 solid;
  11.     display:none;            /* 默认对话框隐藏 */
  12. }
  13. .box.show{display:block;}
  14. .box .x{ font-size:18px; text-align:right; display:block;}
  15. .box input{width:80%; font-size:18px; margin-top:18px;}
  16. </style>

  18. <script>  
  19.         function change(n){
  20.             document.getElementById('inputbox').style.display=n?'block':'none';     /* 点击按钮打开/关闭 对话框 */
  21.         }
  22.      </script>
  23. </head>
  24. <body>

  26. <div id="div1">
  27. <input type="button" onClick="change(1)" value="修改">
  28.         <table>
  29.             <tr>
  30.                 <td width="62"><a  target="_blank">淘宝</a></td>
  31.         <tr>
  32.                 <td><a  target="_blank">tmall</a></td>
  33.         </tr>
  34.         <tr>
  35.                 <td><a  target="_blank">jd</a></td>
  36.         </tr>
  37.         </tr>
  38.     </table>
  39. </div>
  40. <div id='inputbox' class="box">
  41.         <a class='x' href=''; onclick="change; return false;">关闭</a>
  42.         <p>新名称：</p><input type="text">
  43.         <p>新网址：</p><input type="text">
  44.         <input type="button" value="确定">
  45. </div>

  47. </body>
  48. </html>
复制代码






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2