使用切换按钮更改视图 (div)答案

【问题标题】：Changing views (div) with toggle button使用切换按钮更改视图 (div)
【发布时间】：2014-08-08 19:54:34
【问题描述】：

我想用#btn 在两个不同的视图之间切换 index.html：

非实时：#getDateTime 和 #showData 应可见
实时：#stateBela 应可见

问题：它可以工作，但什么不工作如下：

所有 (!) div 在启动 index.html 后可见，但只有 #stateBela 应该是可见的，因为默认设置是“实时”。我该怎么做？

toggleState函数写在上面的“head-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 被写入/列出在 html 代码的下部“body-部分”...

<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>

【问题讨论】：

标签： javascript html button toggle

【解决方案1】：

您应该在您的 javascript 中添加这些行：

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

window.onload = startState;

【讨论】：

【解决方案2】：

您可以添加一个样式属性以在页面加载时隐藏它们。

<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>

【讨论】：

原来如此简单 :-) 谢谢！

【解决方案3】：

CSS：

#getDateTime, #showData {
  display: none;
}

【讨论】：

原来如此简单 :-) 谢谢！