javascript/html/css顯示/隱藏框

我之前做過類似的事情，但此時代碼無法正常工作。基本上，我想讓用戶打開和關閉一盒html。這裏是一個的jsfiddlejavascript/html/css顯示/隱藏框

有幾個問題與此有關。首先它不能正常工作，可能是由於錯字。其次，我希望默認是隱藏文本，而不是顯示它，與此嘗試做的相反。最後，是否可以在div中放置一個表格，這樣整個表格就可以打開和關閉 - 而不是「一些文本」。

這裏是非工作代碼...與jsfiddle一樣。

JS: 
function toggleBox(obj) { 
      var box = document.getElementById("box"); 
      if (box.style.display == "none") { 
       box.style.display = ""; 
       obj.innerHTML = <div>Hide</div>; 
      } else { 
       box.style.display = "none"; 
       obj.innerHTML = <div>Show</div>"; 
      } 
     } 
html: 
<table><tr><td><div> 
<a href="javascript:void(0)" onclick="toggleBox(this);"><div>Hide</div></a><div id="box"> 
Some text</div></div></td></tr></table>

感謝您的任何建議。

來源

2012-07-08 user1260310

你應該換

Hide

和

Show

爲「 – davids 2012-07-08 16:20:22

你應該使用控制檯：有一些語法錯誤（在功能的HTML應該是引號之間） – Kerstomaat 2012-07-08 16:22:17

同樣在的jsfiddle，你的JS被包裹在一個裝載機的功能，所以。在jsFiddle的側邊欄上設置'onLoad'爲'no wrap' – Kerstomaat 2012-07-08 16:23:37

好吧，如果你沒事不使用JavaScript（和支持僅實現了:target僞選擇瀏覽器）：

<table> 
    <tr> 
     <td> 
      <div> 
       <a href="#box"> 
        <div>Hide</div> 
       </a> 
       <div id="box"> 
        Some text. <a href="#">Hide</a></div> 
      </div> 
     </td> 
    </tr> 
</table>

和CSS：

#box { 
    display: none; 
} 

#box:target { 
    display: block; 
}

JS Fiddle demo。

來源

2012-07-08 16:21:26

javascript/html/css顯示/隱藏框

回答

相關問題