Archives

All posts for the month 八月, 2018

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

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 格圖片廣告

https://www.logoless.com.tw/home/

國產

30點 = 30 元

 

https://fandorashop.com

售價 10%

停止開放新設計師

 

 

https://www.gag.design/help

400 以上自行定價

但必須獨賣

台灣單件免運

 

https://www.spreadshirt.com/

 

 

 

http://www.teediary.com/

最低售價 + 自訂利潤

十件以上才成團出貨