首頁 > 開發者 > JavaScript

JavaScript基礎 選項卡效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：images   idt   meta   set   地方   lock   努力學習   bcg   table   

 鎮場詩：
　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。
　　　　學有小成返哺根，願鑄一良心部落格。誠心於此寫經驗，願見文者得啟發。
——————————————————————————————————————————

code:

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title><style type="text/css">        .testDiv{            height:150px;            width:150px;        }        td{            height:30px;            width:60px;        }        .bcgRed{            background-color:red;        }        .bcgGreen{            background-color:green;        }        .bcgBlue{            background-color:blue;        }        .current{            background-color:burlywood;        }        .notCurrent{            background-color:cornflowerblue;        }</style>    <script type="text/javascript">        //className與id的命名 關聯性        //在函數的中 數組與迴圈的使用,        //需要去做項目，小模組也好。提升自己的實踐經驗。        function ShowDiv(num)        {            var tdArray = ["redTd", "greenTd", "blueTd"];            for (var i = 0; i < tdArray.length; i++)            {                document.getElementById(tdArray[i]).className = "notCurrent";                document.getElementById(tdArray[i] + "_Div").style.display = "none";            }            document.getElementById(tdArray[num]).className = "current";            document.getElementById(tdArray[num] + "_Div").style.display = "block";        }    </script></head><body>    <table>        <tr>            <td id="redTd" class="current" onmouseover="ShowDiv(0)">0</td>            <td id="greenTd" class="notCurrent" onmouseover="ShowDiv(1)">1</td>            <td id="blueTd" class="notCurrent" onmouseover="ShowDiv(2)">2</td>        </tr>    </table>    <div class="testDiv"><!--這個是防止整個網頁架構大動 就是這個div的大小不變化，變化的是其中的內容-->        <div id="redTd_Div" class="testDiv bcgRed" style="display:block">            <!--這id的命名可謂是很巧妙呀，這都是實踐才會有的經驗-->        </div>        <div id="greenTd_Div" class="testDiv bcgGreen" style="display:none">        </div>        <div id="blueTd_Div" class="testDiv bcgBlue" style="display:none">        </div>    </div></body></html>

 



result:

 

 

 



——————————————————————————————————————————
博文的精髓，在技術部分，更在鎮場一詩。IDE: VS2015;瀏覽器: Firefox。
html+css+js，強，值得努力學習。傳智播客的視頻教程是我的學習資源,推薦。
如果博文有可以改進的地方，請留下評論，我會認真思考的。

註：我是一位正在努力的普通人，此文僅供測試與參考使用，不可做其他用途。當參考博文內容時，代表您已接受使用規定。

JavaScript基礎 選項卡效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More