tab欄切換

tab欄切換.jpg
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        ul {
            width: 600px;
            height: 40px;
            margin-left: -1px;
            list-style: none;
        }
        li {
            float: left;
            width: 101px;
            height: 40px;
            text-align: center;
            font: 600 18px/40px "simsun";
            background-color: pink;
            cursor: pointer;
        }
        span {
            display: none;
            width: 500px;
            height: 360px;
            background-color: yellow;
            text-align: center;
            font: 700 150px/360px "simsun";
        }
        .show {
            display: block;
        }
        .current {
            background-color: yellow;
        }
    </style>

    <script>
        window.onload = function () {
            //需求:鼠標放到上面的li上次伶,li本身變色(添加類),對應(yīng)的span也顯示出來(添加類);
            //思路:1.點亮盒子通砍。   2.利用索引值顯示盒子用狱。
            //步驟:
            //1.獲取事件源和相關(guān)元素
            //2.綁定事件
            //3.書寫事件驅(qū)動程序(排他思想)


            //1.獲取事件源和相關(guān)元素
            var boxArr = document.getElementsByClassName("box");
            //函數(shù)調(diào)用
            for(var i=0;i<boxArr.length;i++){
                fn(boxArr[i]);
            }

            //函數(shù)封裝
            function fn(ele){
                var liArr = ele.getElementsByTagName("li");
                var spanArr = ele.getElementsByTagName("span");
                //2.綁定事件(循環(huán)綁定)
                for(var i=0;i<liArr.length;i++){
                    //綁定索引值(自定義屬性)
                    liArr[i].setAttribute("index",i);
                    liArr[i].onmouseover = function () {
                        //3.書寫事件驅(qū)動程序(排他思想)
                        //1.點亮盒子镜粤。   2.利用索引值顯示盒子觉壶。(排他思想)
                        for(var j=0;j<liArr.length;j++){
                            liArr[j].removeAttribute("class");
                            spanArr[j].removeAttribute("class");
                        }
                        this.setAttribute("class","current");
                        spanArr[this.getAttribute("index")].setAttribute("class","show");
                    }
                }
            }
        }


//方法二:
window.onload = function () {
            //需求:鼠標放到上面的li上,li本身變色(添加類)缝裤,對應(yīng)的span也顯示出來(添加類);
            //思路:1.點亮盒子屏轰。   2.利用索引值顯示盒子。
            //步驟:
            //1.獲取事件源和相關(guān)元素
            //2.綁定事件
            //3.書寫事件驅(qū)動程序(排他思想)


            //1.獲取事件源和相關(guān)元素
            var liArr = document.getElementsByTagName("li");
            var spanArr = document.getElementsByTagName("span");
            //2.綁定事件(循環(huán)綁定)
            for(var i=0;i<liArr.length;i++){
                //綁定索引值
                liArr[i].index = i;
                liArr[i].onmouseover = function () {
                    //3.書寫事件驅(qū)動程序(排他思想)
                    //1.點亮盒子憋飞。   2.利用索引值顯示盒子霎苗。(排他思想)
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].className = "";
                        spanArr[j].className = "";
                    }
                    this.className = "current";
                    spanArr[this.index].className = "show";
                }
            }
        }

//方法三:
 window.onload = function () {
            var boxArr = document.getElementsByClassName("box");
            for(var i=0;i<boxArr.length;i++){
                fn(boxArr[i]);
            }
            function fn(ele){
                var liArr = ele.getElementsByTagName("li");
                var spanArr = ele.getElementsByTagName("span");
                for(var i=0;i<liArr.length;i++){
                    liArr[i].index = i;
                    liArr[i].onmouseover = function () {
                        for(var j=0;j<liArr.length;j++){
                            liArr[j].className = "";
                            spanArr[j].className = "";
                        }
                        this.className = "current";
                        spanArr[this.index].className = "show";
                    }
                }
            }
        }
    </script>
</head>
<body>

    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>襪子</li>
            <li>帽子</li>
            <li>褲子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>襪子</span>
        <span>帽子</span>
        <span>褲子</span>
        <span>裙子</span>
    </div>



    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>襪子</li>
            <li>帽子</li>
            <li>褲子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>襪子</span>
        <span>帽子</span>
        <span>褲子</span>
        <span>裙子</span>
    </div>



    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>襪子</li>
            <li>帽子</li>
            <li>褲子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>襪子</span>
        <span>帽子</span>
        <span>褲子</span>
        <span>裙子</span>
    </div>

</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市榛做,隨后出現(xiàn)的幾起案子唁盏,更是在濱河造成了極大的恐慌,老刑警劉巖检眯,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厘擂,死亡現(xiàn)場離奇詭異,居然都是意外死亡锰瘸,警方通過查閱死者的電腦和手機刽严,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來避凝,“玉大人舞萄,你說我怎么就攤上這事∷∏” “怎么了鹏氧?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長佩谣。 經(jīng)常有香客問我把还,道長,這世上最難降的妖魔是什么茸俭? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任吊履,我火速辦了婚禮,結(jié)果婚禮上调鬓,老公的妹妹穿的比我還像新娘艇炎。我一直安慰自己,他們只是感情好腾窝,可當我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布缀踪。 她就那樣靜靜地躺著居砖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪驴娃。 梳的紋絲不亂的頭發(fā)上奏候,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天,我揣著相機與錄音唇敞,去河邊找鬼蔗草。 笑死,一個胖子當著我的面吹牛疆柔,可吹牛的內(nèi)容都是我干的咒精。 我是一名探鬼主播,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼旷档,長吁一口氣:“原來是場噩夢啊……” “哼模叙!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起彬犯,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤向楼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后谐区,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡逻卖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年宋列,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片评也。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡炼杖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出盗迟,到底是詐尸還是另有隱情坤邪,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布罚缕,位于F島的核電站艇纺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏邮弹。R本人自食惡果不足惜黔衡,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望腌乡。 院中可真熱鬧盟劫,春花似錦、人聲如沸与纽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至影所,卻和暖如春氢哮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背型檀。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工冗尤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人胀溺。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓裂七,卻偏偏與公主長得像,于是被迫代替她去往敵國和親仓坞。 傳聞我的和親對象是個殘疾皇子背零,可洞房花燭夜當晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容