使JavaScript链接隐藏onClick_Javascript_Html

使JavaScript链接隐藏onClick

javascript html

使JavaScript链接隐藏onClick,javascript,html,Javascript,Html,我有一个表单页面，某些项目只有在点击链接时才会出现在列表上。我希望链接在单击时隐藏，并且它调用的操作取消隐藏这是我的测试页面：功能切换（itemID）{ //在无和“”之间切换可见性 if（（document.getElementById（itemID.style.display=='none'））{ document.getElementById（itemID）.style.display='' event.preventDefault（） }否则{ document.getElemen

我有一个表单页面，某些项目只有在点击链接时才会出现在列表上。我希望链接在单击时隐藏，并且它调用的操作取消隐藏

这是我的测试页面：

功能切换（itemID）{
//在无和“”之间切换可见性
if（（document.getElementById（itemID.style.display=='none'））{
document.getElementById（itemID）.style.display=''
event.preventDefault（）
}否则{
document.getElementById（itemID）.style.display='none'；
event.preventDefault（）
}
}


ID
说明
说出来
A.
没有名称的字段
a1
附加1
a2
附加2
a3
附加组件-每日1
a4
附加组件-每日2
附加1：
附加2：
附加组件3-每日1：
附加组件4-每日2：

说明：提供了用于切换唯一

id

s的

html

元素。还需要更新javascript以获得单击链接的父元素的父元素。这仅在有两个元素到达

tr

时有效

重要的是，这段代码有一个额外的unhide，这是不需要的…因为我们正在隐藏它，没有什么可以点击的

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
      <table width="500" border="1" cellpadding="3">
  <cfform action="" method="POST">
      <tr>
        <td align="center"><strong>ID</strong></td>
        <td align="center"><strong>DESCRIPTION</strong></td>
        <td align="center">
         <strong>SAY IT</strong>
        </td>
      </tr>
      <tr>
         <td align="center">a</td>
         <td>
          The&nbsp;field&nbsp;with&nbsp;no&nbsp;name
         </td>
         <td>
          <cfinput type="Text" name="aaa" value="">
         </td>
       </tr>
       <tr id="tr1" style="display:none">
         <td align="center">a1</td>
         <td>Add-on1</td>
         <td>
            <cfinput type="Text" name="a1" value="Add-on1">
         </td>
       </tr>
       <tr id="tr2" style="display:none">
         <td align="center">a2</td>
         <td>Add-on2</td>
        <td>
          <cfinput type="Text" name="a2" value="Add-on2">
        </td>
       </tr>

      <tr id="tr3" style="display:none">
        <td align="center">a3</td>
        <td>Add-on - Daily1</td>
        <td>
          <cfinput type="Text" name="a1d" value="Add-on - Daily1">
        </td>
      </tr>
      <tr id="tr4" style="display:none">
        <td align="center">a4</td>
        <td>Add-on - Daily2</td>
        <td>
          <cfinput type="Text" name="a2d" value="Add-on - Daily2">
        </td>
      </tr>
      <tr>
        <td colspan=3>
         <input type="submit" name="Submit" value="Submit"></td>
      </tr>
     </cfform>
   </table>

   &nbsp;
  <!--- ----------------------------------------------------------------- --->

  <table border="0">
    <tr>
      <td align="right">Add-on1:&nbsp;</td>
      <td><a href="#" id="toggle" onClick="toggle_it(this.id, 'tr1')">Add-on1</a></td>
    </tr>
     <tr>
      <td align="right">Add-on2:&nbsp;</td>
      <td><a href="#" id="toggle1" onClick="toggle_it(this.id, 'tr2')">Add-on2</a></td>
    </tr>
    <tr>
      <td align="right">Add-on3 - Daily1:&nbsp;</td>
      <td><a href="#" id="toggle2" onClick="toggle_it(this.id, 'tr3')">Add-on - Daily1</a></td>
   </tr>
   <tr>
     <td align="right">Add-on4 - Daily2:&nbsp;</td>
     <td><a href="#" id="toggle3" onClick="toggle_it(this.id, 'tr4')">Add-on - Daily2</a></td>
   </tr>
</table>
  </body>

</html>

如果不隐藏/取消隐藏元素，会发生什么情况？-看起来很好请注意，

此属性是，您可以只使用

，type=“text/javascript”是defaultYep。这就是我开始做的，它的效果和广告上的一样。我想要的是隐藏原始链接。列表上有很多选项，我不想让访问者在同一个选项上点击两次。完全是abc123。非常感谢。

// Code goes here

function toggle_it(itemClickedID, itemID) {
  // Toggle visibility between none and '' 
  if ((document.getElementById(itemID).style.display == 'none')) {
    document.getElementById(itemID).style.display = '';
    //gets the parent element of the parent element which is the row
    document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
    event.preventDefault();
  } else {
    event.preventDefault();
    //gets the parent element of the parent element which is the row
    document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
    document.getElementById(itemID).style.display = 'none';
  }
}