Question

我是index.html我想在两个不同的观点之间切换#btn：

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

问题：它有效，但有效的方法如下：

启动index.html后，所有（！）div都可见，但只有 #stateBela应该可见，因为默认设置为“REALTIME”。我该怎么办？

函数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代码的较低“正文 -part”中编写/列出...

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

Answer 1

CSS：

#getDateTime, #showData {
  display: none;
}

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

Answer 3

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

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

window.onload = startState;

使用切换按钮更改视图（div）

3 个答案: