可以上這個頁面直接看到效果
http://js.do/chrixtal/divshowornot
<html>
<head>
<title>顯示與隱藏的控制</title>
<!-- 2018.08.26 Created by Chris Yang-->
<!-- 此段程式展示如何顯示與隱藏 HTML 區塊-->
<script type="text/javascript">
// 定義一個函式,會傳入頁碼(vPage), 只有指定頁會顯示
function ShoworNot(vPage) {
//取得四個區塊,並準備做切換
var DB1 = document.getElementById("DivBlock1");
var DB2 = document.getElementById("DivBlock2");
var DB3 = document.getElementById("DivBlock3");
var DB4 = document.getElementById("DivBlock4");
//如果是第一頁,只有第一頁的 display 是 block(顯示),其他都是 none
if (vPage == 1) {
DB1.style.display = 'block';
DB2.style.display = 'none';
DB3.style.display = 'none';
DB4.style.display = 'none';
}
//依此類推
if (vPage == 2) {
DB1.style.display = 'none';
DB2.style.display = 'block';
DB3.style.display = 'none';
DB4.style.display = 'none';
}
if (vPage == 3) {
DB1.style.display = 'none';
DB2.style.display = 'none';
DB3.style.display = 'block';
DB4.style.display = 'none';
}
if (vPage == 4) {
DB1.style.display = 'none';
DB2.style.display = 'none';
DB3.style.display = 'none';
DB4.style.display = 'block';
}
}
</script>
</head>
<body>
<!-- Block 1 -->
<!-- id 就是我們要控制的 DIV 區塊,後面的 style 控制他是否顯示-->
<div id="DivBlock1" style="display:block;">
I'm Block 1
<hr>
<!-- 當點擊按鈕的時候呼叫上面所準備好的函式,只顯示該區塊-->
<!-- 如果第一個區塊不想往前跳到最後一個區塊,把第一行的 onclick 的屬性拿掉即可 -->
<input type="button" onclick="ShoworNot(4);" value="切換第四個區塊" />
<input type="button" onclick="ShoworNot(2);" value="切換第二個區塊" />
</div>
<!-- 下面就都一樣 -->
<div id="DivBlock2" style="display:none;">
第二個區塊,可以往前,往後
<hr>
<input type="button" onclick="ShoworNot(1);" value="切換第一個區塊" />
<input type="button" onclick="ShoworNot(3);" value="切換第三個區塊" />
</div>
<div id="DivBlock3" style="display:none;">
第三個區塊
<hr>
<input type="button" onclick="ShoworNot(2);" value="切換第二個區塊" />
<input type="button" onclick="ShoworNot(4);" value="切換第四個區塊" />
</div>
<div id="DivBlock4" style="display:none;">
我是最後一個區塊
<hr>
<input type="button" onclick="ShoworNot(3);" value="切換第三個區塊" />
<input type="button" onclick="ShoworNot(1);" value="切換第一個區塊" />
</div>
</body>
<!-- That's all, enjoy it!-->
</html>
切換 DIV
控制 HTML 區塊的顯示與否
參考範例:
http://www.bkjia.com/webzh/881978.html
http://jessen163.iteye.com/blog/1349975
https://www.webdesigns.com.tw/jquery_tab.asp