更改视图（格）与切换按钮

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

更改视图（格）与切换按钮

回答

相关问题