[作特效, 學JS] -- 07 網頁選項卡

最終效果

實現的功能

  1. 鼠標移入 tab, 鏈接內容自動切換
  2. 鼠標移入 tab, tab 自動高亮
  3. 鼠標移出, tab 保存鼠標移出時的狀態

代碼(html和js分離)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>簡易選項卡</title>
        <style> body, ul, li { margin: 0; padding: 0; } body { font: 12px/1.5 Tahoma; } #outer { width: 450px; margin: 10px auto; } #tab { overflow: hidden; zoom: 1; background: #000; border: 1px solid #000; } #tab li { float: left; color: #fff; height: 30px; cursor: pointer; line-height: 30px; list-style-type: none; padding: 0 20px; } #tab li.current { color: #000; background: #ccc; } #content { border: 1px solid #000; border-top-width: 0; } #content ul { line-height: 25px; display: none; margin: 0 30px; padding: 10px 0; } </style>
    </head>
    <body>
        <div id="outer">
            <ul id="tab">
                <li class="current">政治</li>
                <li>八卦</li>
                <li>時事</li>
            </ul>
            <div id="content">
                <ul style="display:block">
                    <li class="bold-item">
                        <span class="dot"></span>
                        <a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1315399.shtml" mon="ct=1&amp;a=2&amp;c=top&amp;pn=1" target="_blank">中央批准:免去沈曉明上海市委常委、委員職務</a>
                    </li>
                    <li><a href="http://china.huanqiu.com/article/2016-09/9479605.html?from=bdwz" mon="ct=1&amp;a=2&amp;c=top&amp;pn=2" target="_blank">河北省委常委、政法委書記董仚生辭去副省長職務</a></li>
                    <li><a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1314362.shtml" mon="ct=1&amp;a=2&amp;c=top&amp;pn=3" target="_blank">公安局紀委書記裝GPS跟蹤區委書記 獲刑3年半</a></li>
                    <li><a href="http://world.huanqiu.com/article/2016-09/9480050.html?from=bdwz" mon="ct=1&amp;a=2&amp;c=top&amp;pn=4" target="_blank">美總統大選醜聞不斷:特朗普曝屢次挪用其基金會資金</a></li>
                    <li><a href="http://news.cyol.com/content/2016-09/23/content_14088428.htm" mon="ct=1&amp;a=2&amp;c=top&amp;pn=5" target="_blank">六部門:電信網絡詐騙犯罪人員10月31日前要主動投案</a></li>
                    <li><a href="http://world.huanqiu.com/article/2016-09/9480301.html?from=bdwz" mon="ct=1&amp;a=2&amp;c=top&amp;pn=6" target="_blank">外媒稱杜特爾特10月中旬將訪華 中方:期待早日成行</a></li>
                </ul>
                <ul>
                    <li class="bold-item">
                        <span class="dot"></span>
                        <a href="http://ent.ifeng.com/a/20160923/42689367_0.shtml?_zbs_baidu_news" mon="ct=1&amp;a=2&amp;c=top&amp;pn=25" target="_blank">陳喬恩長文悼念喬任梁:對不起沒多關心你</a>
                    </li>
                    <li><a href="http://china.huanqiu.com/article/2016-09/9476618.html?from=bdwz" mon="ct=1&amp;a=2&amp;c=top&amp;pn=26" target="_blank">媒體揭祕燕城監獄:內部到底是什麼樣子(圖)</a></li>
                    <li><a href="http://d.youth.cn/shrgch/201609/t20160923_8684548.htm" mon="ct=1&amp;a=2&amp;c=top&amp;pn=27" target="_blank">貴州雙胞胎患病眼睛似外星人:無眼瞼瞳孔上翻</a></li>
                    <li><a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1314292.shtml" mon="ct=1&amp;a=2&amp;c=top&amp;pn=28" target="_blank">初中生寫做文字跡潦草 老師留評語「呆B」</a></li>
                    <li><a href="http://shehui.china.com.cn/2016-09/23/content_39359541.htm" mon="ct=1&amp;a=2&amp;c=top&amp;pn=29" target="_blank">賭徒爲還債拍黑磚搶錢 謊稱私人恩怨從容逃脫</a></li>
                    <li><a href="http://xinwen.eastday.com/a/160923071129828.html" mon="ct=1&amp;a=2&amp;c=top&amp;pn=30" target="_blank">陝西大三女生輕信"公檢法查洗錢案" 被騙31萬元</a></li>
                </ul>
                <ul>
                    <li class="bold-item"><a href="http://xinwen.eastday.com/a/160923071245450.html">深圳二手房賣主悔約不服判決 糾集60餘人衝擊法院</a></li>
                    <li><a href="http://xinwen.eastday.com/a/160923142928053.html">中國勞動保障藍皮書:今明兩年全球失業率將上升</a></li>
                    <li><a href="http://news.cyol.com/content/2016-09/23/content_14087297.htm" mon="ct=1&amp;a=2&amp;c=top&amp;pn=9">紐約截獲450萬美圓象牙及製品 系當地史上最大</a></li>
                    <li><a href="http://news.ifeng.com/a/20160923/50013009_0.shtml?_zbs_baidu_news" mon="ct=1&amp;a=2&amp;c=top&amp;pn=10">賴德榮被免廣西政協副主席職務 此前被降爲科員</a></li>
                    <li><a href="http://china.huanqiu.com/article/2016-09/9479905.html?from=bdwz " mon="ct=1&amp;a=2&amp;c=top&amp;pn=11">面對人大常委會質詢,南昌市長向500多萬市民道歉</a></li>
                    <li><a href="http://china.huanqiu.com/article/2016-09/9480409.html?from=bdwz" mon="ct=1&amp;a=2&amp;c=top&amp;pn=12">中央網信辦、民政部聯合發文 增強網信社會組織建設</a></li>
                </ul>
            </div>
        </div>
        <script src="demo.js"></script>
    </body>
</html>
複製代碼
window.onload = function() {
    var aLi = document.querySelectorAll("#tab li");
    var aUl = document.querySelectorAll("#content ul");

    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onmouseover = function() {
            for (var n = 0; n < aLi.length; n++) {
                aLi[n].className = "";
            }
            this.className = "current";
            for (var n = 0; n < aUl.length; n++) {
                aUl[n].style.display = "none";
            }
            aUl[this.index].style.display = "block";
        };
    }
};
複製代碼

window.onload

  • 當網頁加載完畢後, 在執行js代碼
  • 這樣的話, js代碼能夠放在網頁的任何位置

document.querySelectorAll()document.querySelector()

  • 都是經過css選擇器, 來找對象
  • 區別在於, document.querySelectorAll()返回全部匹配項
  • document.querySelector()只返回符合要求的第一個元素

arr.length 獲取數組長度

匈牙利命名法和駝峯命名法

什麼是this?

  • 當前動做的執行者, 當前函數的調用者

專欄地圖

相關文章
相關標籤/搜索