那些有趣的小事

這世界怎麼這麼多有趣的小事?

  • Licensing
  • Thanks for your help!
  • VEGA Hunter
  • 商店
  • 我的帳號
  • 結帳
  • 購物車
  • 隱私權政策

動態顯示 DIV 內容

Posted by admin on 2018-08-26
Posted in: Programming. Tagged: DIV, HTML, java script. 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 格圖片廣告

Posts navigation

← Word Art / 字雲
ffmpeg 怎麼轉都有橫紋 + 參數使用心得分享 →
  • 近期文章

    • windows 10 網路分享不用密碼的設定
    • 笑話
    • 右鍵增加 命令提示字元
    • BTC,ETH可以開始做空了!
    • 使用 ssh (console) 重設 wordpress 密碼
  • 近期留言

    • 彙整

      • 2022 年 2 月
      • 2022 年 1 月
      • 2021 年 9 月
      • 2021 年 7 月
      • 2021 年 4 月
      • 2020 年 10 月
      • 2020 年 9 月
      • 2020 年 8 月
      • 2020 年 6 月
      • 2020 年 5 月
      • 2020 年 4 月
      • 2020 年 3 月
      • 2019 年 4 月
      • 2018 年 10 月
      • 2018 年 8 月
      • 2018 年 3 月
      • 2018 年 1 月
      • 2017 年 10 月
      • 2017 年 9 月
      • 2017 年 7 月
      • 2017 年 2 月
      • 2017 年 1 月
      • 2016 年 12 月
      • 2016 年 8 月
      • 2016 年 7 月
    • 分類

      • Design
      • GAME
      • IT
      • Line Rangers
      • MicroStock
      • Photo
      • Pokemon Go
      • Programming
      • Tools
      • Utility
      • VEGA CONFLICT
      • 未分類
    • 其他操作

      • 登入
      • 訂閱網站內容的資訊提供
      • 訂閱留言的資訊提供
      • WordPress.org 台灣繁體中文
    Proudly powered by WordPress Theme: Parament by Automattic.