更改視圖（格）與切換按鈕

我的index.html的我想與#btn兩者之間的不同意見進行切換：更改視圖（格）與切換按鈕

非實時：#getDateTime和#showData是可視
REALTIME：#stateBela應當看到

問：它的工作原理，但什麼是不工作如下：

所有（！）div在啓動index.html後都可見，但只有 #stateBela應可見，因爲默認設置爲「REALTIME」。我怎樣才能做到這一點？

功能toggleState寫入上部「頭 -part」 ......

<head> 
    <!-- define the toggle function --> 
    <script type="text/javascript"> 
     function toggleState(item){ 

      if(item.className == "on") { 
       item.className="off"; 
       item.value="NON-REALTIME"; 

       document.getElementById("stateBela").style.display = 'none'; 

       document.getElementById("getDateTime").style.display = 'inline'; 
       document.getElementById("showData").style.display = 'inline'; 

      } else { 
       item.className="on"; 
       item.value="REALTIME"; 

       document.getElementById("stateBela").style.display = 'inline'; 

       document.getElementById("getDateTime").style.display = 'none'; 
       document.getElementById("showData").style.display = 'none'; 
      } 
     } 
    </script> 
</head>

...和的div被寫入/下部「體 -part列出「的HTML代碼...

<body> 
    <!-- call function 'toggleState' whenever clicked --> 
    <input type="button" id="btn" value="REALTIME" class="on" onclick="toggleState(this)" /> 


    <div id="stateBela"> 
     <label>BELA is: offline or online</label> 
    </div> 

    <div id="getDateTime"> 
     <label>After:</label><input id="afterDate" name="afterDate" type="text" value="Date"> 
     <label>To:</label><input id="toDate" name="afterDate" type="text" value="Date" /> 
     <label>After:</label><input id="afterTime" name="afterTime" type="text" value="Time" /> 
     <label>To:</label><input id="toTime" name="toTime" type="text" value="Time" /> 
    </div> 

    <div id="showData"> 
     <button>Show data</button> 
    </div> 
</body>

來源

2014-06-18 Kevin

CSS：

#getDateTime, #showData { 
    display: none; 
}

來源

2014-06-18 13:36:27 Nick

這本來是很容易:-)謝謝！ – Kevin

只需添加樣式屬性即可在頁面加載時隱藏它們。

<div id="getDateTime" style="display:none"> 
    <label>After:</label><input id="afterDate" name="afterDate" type="text" value="Date"> 
    <label>To:</label><input id="toDate" name="afterDate" type="text" value="Date" /> 
    <label>After:</label><input id="afterTime" name="afterTime" type="text" value="Time" /> 
    <label>To:</label><input id="toTime" name="toTime" type="text" value="Time" /> 
</div> 

<div id="showData" style="display:none"> 
    <button>Show data</button> 
</div>

來源

2014-06-18 13:36:36

這會很容易:-)謝謝！ – Kevin

你應該在你的JavaScript添加這些行：

function startState { 
    toggleState(document.getElementById("btn")); 
} 

window.onload = startState;

來源

2014-06-18 13:39:47 jedema

更改視圖（格）與切換按鈕

回答

相關問題