動態顯示 DIV 內容

Posted by admin on 2018-08-26
Posted in: Programming. Tagged: , , . Leave a Comment

可以上這個頁面直接看到效果

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

[jQ]用 jQuery 做廣告 – 仿 Yahoo 切換式 N 格圖片廣告