如何用javascript隱藏或顯示html標記

-2

我在我的HTML代碼中有2個div標籤，並且我已經定義了一個可以用來展開或隱藏它們的類。我遇到的問題是，當我點擊一個其他變化的價值。如何用javascript隱藏或顯示html標記

<HTML> 

    <BODY> 
     <FORM> 
      <script language="JavaScript"> 
       function setVisibility(id) { 
        if (document.getElementById('btnshowhide').value == '-') { 
         document.getElementById('btnshowhide').value = '+'; 
         document.getElementById(id).style.display = 'none'; 
        } else { 
         document.getElementById('btnshowhide').value = '-'; 
         document.getElementById(id).style.display = 'inline'; 
        } 
       } 
      </script> 
      <FIELDSET style="width: 600px;"> 
       <LEGEND> 
        <input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div1');" ;/>Insert Data:</LEGEND> 
       <DIV id="div1" style="display: none;"> 
        <LABEL for="351fef76-b826-426f-88c4-dbaaa60f886b">Name:</LABEL> 
        <TEXTAREA id="351fef76-b826 -426f-88c4-dbaaa60f886b" name="txtname" value="Name" type="text" title="Name:">Name</TEXTAREA> 
        <BR> 
        <LABEL for="02973dcc-5677-417c-a9bf-1578f58923ef">Family:</LABEL> 
        <TEXTAREA id="02973dcc-5677-417c-a9bf-1578f58923ef" name="txtFamiy" value="Family" type="text" title="Family:">Family</TEXTAREA> 
        <BR> 
       </DIV> 
      </FIELDSET> 
      <BR> 
      <FIELDSET style="width: 600px;"> 
       <LEGEND> 
        <input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div2');" ;/>Insert Data:</LEGEND> 
       <DIV id="div2" style="display: none;"> 
        <LABEL for="d8876943-5861-4d62-9249-c5fef88219fa">Type of property</LABEL> 
        <SELECT id="d8876943-5861-4d62-9249-c5fef88219fa" name="PropertyType" value="" type="select" title="Type of property"></SELECT> 
        <BR> 
       </DIV> 
      </FIELDSET> 
      <BR> 
     </FORM> 
    </BODY> 

</HTML>

我試着改變我的按鈕的ID，但沒有改變。

來源

2013-05-04 Pedram

'元素的id'必須是唯一的。如果分配給兩個按鈕，您將具有相同的功能。 – SachinGutte 2013-05-04 08:11:37

@SachinG：我已經嘗試更改ID，但它不起作用。 – Pedram 2013-05-04 08:14:04

我的問題值得投票嗎？ – Pedram 2013-05-04 08:18:35

變化你按鈕 -

<input type="button" name="type" id="btnshowhide1" value="+" onclick="setVisibility('div1',this.id);";/> 

and 

<input type="button" name="type" id="btnshowhide2" value="+" onclick="setVisibility('div2',this.id);";/>

而且使用下面的函數 -

所有的

function setVisibility(id,buttonid) { 
    if(document.getElementById(buttonid).value=='-'){ 
     document.getElementById(buttonid).value = '+'; 
     document.getElementById(id).style.display = 'none'; 
    } 
else{ 
     document.getElementById(buttonid).value = '-'; 
     document.getElementById(id).style.display = 'inline'; 
    } 
}

DEMO

來源

2013-05-04 08:19:27 SachinGutte

謝謝你，它工作得非常好。 – Pedram 2013-05-04 08:27:25

首先，你shouldn`t有相同ID的兩個元素。你應該使用它的類。

它發生是因爲你有兩個按鈕id="btnshowhide"所以當你試圖做document.getElementById('btnshowhide').value它匹配你的兩個按鈕。

你可以做這樣的事情

<script language="JavaScript"> 
function setVisibility(id,input) 
{ 
    if(input.value=='-') 
    { 
     input.value = '+'; 
     document.getElementById(id).style.display = 'none'; 
    } 
    else 
    { 
     input.value = '-'; 
     document.getElementById(id).style.display = 'inline'; 
    } 
} 
</script>

，並在您輸入

onclick="setVisibility('div1', this);" 
onclick="setVisibility('div2', this);"

來源

2013-05-04 08:24:13 Ales

如何用javascript隱藏或顯示html標記

回答

相關問題