想使用javascript獲取不同div元素的p點擊p元素的id

-1

我有一個帶p標籤和div元素的頁面，div元素設置爲display：none，所以我只想顯示不同的div如下圖所示，在標籤的點擊標籤內，但我被卡在獲取div的不同id。請幫助我擺脫這種情況。下面是我的代碼。謝謝想使用javascript獲取不同div元素的p點擊p元素的id

<script> 
     function toggle(id)// here is the function which gets the different ids of the div 
     { var element = document.getElementById(id); 
      for(i=1; i<3; i++) 
     { 
      if(element[i].style.display == "none") 
      { 
       element[i].style.display = "block"; 
      } 
      else 
      { 
       element[i].style.display = "none" 
      } 
     } 

     } 
     </script> 
    <body> 
     <p onclick="toggle('div1')">Sentence1</p> 
     <p onclick="toggle('div2')">Sentence2</p> 
     <div id="div1" name="Name 1" style="display:none; width:400px; height:300px; border:1px solid black; background-color:yellow;" id="div1">Barun Ghatak</div> 
     <div id="div2" style="display:none; width:400px; height:300px; border:1px solid black; background-color:black;" id="div2">Bhoopi</div> 
    </body>

來源

2014-10-09 user1673379

爲什麼要指定兩次'id' 2 ..？循環的目的是什麼？請使用內聯樣式無效... – 2014-10-09 06:15:55

你只有一個div，所以你不需要循環。只需使用

function toggle(id)// here is the function which gets the different ids of the div 
{ 
    var element = document.getElementById(id); 

    if(element.style.display == "none") 
    { 
     element.style.display = "block"; 
    } 
    else 
    { 
     element.style.display = "none" 
    } 
    }

來源

2014-10-09 06:16:45 artm

謝謝是的，它真的有效.. – user1673379 2014-10-09 06:29:07

document.getElementById返回單個對象而不是數組。

如果你想得到兩個div s，我建議使用一個類來得到它們。

來源

2014-10-09 06:18:40 Aashray

謝謝先生，我感謝您的寶貴意見，我會嘗試這一點。 – user1673379 2014-10-09 06:31:45

如果您想一次只顯示一個，例如，如果您正在構建選項卡，那麼您可以使用此代碼先隱藏所有其他div，然後僅顯示您想要切換的那個。否則，如果您很樂意切換它們，則可以使用其他人發佈的代碼。

JS小提琴演示：http://jsfiddle.net/ecs77e9a/

HTML

<p onclick="toggle('div1');">Sentence1</p> 
<p onclick="toggle('div2');">Sentence2</p> 

<div id="content"> 
     <div id="div1" name="Name 1" style="display:none; width:400px; height:300px; border:1px solid black; background-color:yellow;" id="div1">Barun Ghatak</div> 
     <div id="div2" style="display:none; width:400px; height:300px; border:1px solid black; background-color:black;" id="div2">Bhoopi</div> 
</div>

function toggle(id) 
{ 
    //Hide all other divs first 
    var divs = document.getElementById('content').childNodes; 
     for (var i = 0; i < divs.length; i++) { 
     if (divs[i].nodeName == "DIV") { 
      var div = document.getElementById(divs[i].id); 
       div.style.display = "none"; 
     } 
     } 

    //Show the one that's being requested 
    var element = document.getElementById(id); 
    element.style.display = "block"; 

}

來源

2014-10-09 06:41:09 Pete

是的，這是我非常感謝你.. – user1673379 2014-10-09 06:54:59

想使用javascript獲取不同div元素的p點擊p元素的id

回答

相關問題