對此javascript函數進行微調？

我有一個腳本顯示/隱藏通過onClick使用。我可以讓它顯示/隱藏就好，但我無法展示/「隱藏其他所有內容」。所以我得到的是一堆打開的容器，當我真的想要一個。對此javascript函數進行微調？

的Javascript：

<script> 
    function showfields(fields){ 
     if(document.getElementById(fields).style.display=='none'){ 
      document.getElementById(fields).style.display='block'; 
     } 
     else{ 
      document.getElementById(fields).style.display = 'none'; 
     } 
    } 
</script>

HTML：

<div id="hidden" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button> 
</div> 
<div id="hidden2" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something2</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button> 
</div> 
<div id="hidden3" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something3</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button> 
</div> 
<div id="hidden4" class="steps" style="display: block;"> 
    <div class="section" style="margin-right: 10px;"> 
     <h2>Something4</h2> 
    </div> 
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button> 
</div>

感謝

來源

2012-06-05 o_O

你使用jQuery嗎？ –

你如何傳遞/構造'fields'變量？ – Sarfraz

刪除了jQuery標記 - 在這個問題中沒有jquery –

既然你已經使用jQuery標籤這個我認爲是一個選項：

function showfields(fields){ 
    $('.steps').hide() 
    $('#' + fields).show(); 
}

來源

2012-06-05 16:32:57 Porco

你還沒有看過他的問題 – 2012-06-05 16:34:11

你在說什麼？他想隱藏所有其他人，並顯示被點擊的人，而這正是我的功能所要做的。 – Porco

對不起，我沒有看到$（'。steps'）。hide（）但現在我不能刪除downvote，直到你編輯這個 – 2012-06-05 16:40:47

編輯： 這是你想要做什麼：http://jsfiddle.net/Rykus0/67cjt/2/ （不含jQuery的）

（PS - 這是可以做的更好）

你的問題不是很清楚，但我猜測你希望頁面以除隱藏第一個div之外的所有內容開始。

在這種情況下，你所擁有的是好的，只需在你不想顯示的元素上設置style="display:none;"（你也可以使用一個類）。

而且，我相信你應該改變hidden3的onclick電話是showfields('hidden4')和hidden4

來源

2012-06-05 16:36:37

這是這個問題的有效解決方案，它完美地工作。這不是答案的唯一原因是我上面的代碼被剝離以方便閱讀，但隱藏的div之間存在元素，因此呈現nextElementSibling不完全是我需要的。另外，對不起，我的問題並不清楚。 –

由於您提供的解決方案與上述代碼完全相同，因此您仍然可以獲得upvote。 –

夠公平的。我很高興你找到了你需要的幫助！ –

我紅豬同意刪除onclick事件，

另一種選擇是使用類作爲一個標誌，例如

function showFields(fields){ 
    $(fields).each(function(){ 
     if($(this).hasClass('visible'){ 
       $(this).hide(); 
     } 
     else { 
       $(this).show(); 
     } 
    } 
}

來源

2012-06-05 16:38:21 HankChizlJaw

沒有使用jQuery。這一段JavaScript代碼可以幫助你

<script> 
     function showfields(fields){ 
      for(var i=0;i<document.body.getElementsByTagName("*").length;i++) 
      { if(document.body.getElementsByTagName("*")[i].id==field) 
      { 
      document.body.getElementsByTagName("*")[i].style.display='block'; 
      } 
      else{ 
       document.body.getElementsByTagName("*")[i].style.display='block'; 

      } 
     } 
    </script>

來源

2012-06-05 16:39:09

對此javascript函數進行微調？

回答

相關問題