js 京東地址選擇

最近在寫京東，老師說等我們把京東整個頁面都寫完，以後再寫其他的頁面就會覺得好簡單啊，因爲京東的首頁太麻煩，工作量太大。沒寫之前我覺得不就是比其他頁面長一些嘛，有什麼大不了。可真正開始寫才發現，京東這個首頁哪裏是麻煩，是特別麻煩！！！就頁面最頂部30px的灰色小導航條就寫了兩天~~妹子血槽已空，寫不下去了。。。。

這部分看似簡單，其實很討厭，需要考慮的內容非常多。。。。
把這個小條條拆開來看，就是幾個tab切換的小塊，可是我們需要注意的是鼠標懸浮在上面的時候，灰色條小塊的背景顏色會發生改變，還會有一種看起來跟下面的懸浮框是一個整體的視覺效果，如下圖：

在寫這個效果時，我採用了position佈局的方法，將上面地址塊的z-index設置的比懸浮塊的大，使地址塊壓在懸浮塊上面，並且在鼠標移入的時候給地址塊加一條與背景顏色相同的下邊框，這樣在視覺效果上看來就是他們是一個整體啦~~~這個辦法可能有點笨，但是挺好用的。

解決了tab切換的問題，這個地址選擇的效果就完成了一大步啦，我們可以給整個懸浮框加一個點擊事件的事件委託，然後判斷鼠標點擊時的target（這個地方要注意與IE的兼容問題哦），當然也可以給懸浮框裏面的每一個超鏈接都加一個點擊時間，不過個人推薦還是用事件委託，畢竟for循環太消耗內容和性能，能省一個是一個嘛，還是看個人喜好咯。

很簡單的小效果，代碼如下~

html、css代碼：

<div class="top">
    <div class="top-content">
    <div id="cityselect">
        <span id="city">
            送至：<var>北京</var><i>&or;</i>
        </span>
        <div id="select">
            <div class="select-div"><span class="this-selec">北京</span></div>
            <div class="select-div"><span>上海</span></div>
            <div class="select-div"><span>天津</span></div>
            <div class="select-div"><span>重慶</span></div>
            <div class="select-div"><span>河北</span></div>
            <div class="select-div"><span>山西</span></div>
            <div class="select-div"><span>河南</span></div>
            <div class="select-div"><span>遼寧</span></div>
            <div class="select-div"><span>吉林</span></div>
            <div class="select-div"><span>黑龍江</span></div>
            <div class="select-div"><span>內蒙古</span></div>
            <div class="select-div"><span>江蘇</span></div>
            <div class="select-div"><span>山東</span></div>
            <div class="select-div"><span>安徽</span></div>
            <div class="select-div"><span>浙江</span></div>
            <div class="select-div"><span>福建</span></div>
            <div class="select-div"><span>湖北</span></div>
            <div class="select-div"><span>湖南</span></div>
            <div class="select-div"><span>廣東</span></div>
            <div class="select-div"><span>廣西</span></div>
            <div class="select-div"><span>江西</span></div>
            <div class="select-div"><span>四川</span></div>
            <div class="select-div"><span>海南</span></div>
            <div class="select-div"><span>貴州</span></div>
            <div class="select-div"><span>雲南</span></div>
            <div class="select-div"><span>西藏</span></div>
            <div class="select-div"><span>陝西</span></div>
            <div class="select-div"><span>甘肅</span></div>
            <div class="select-div"><span>青海</span></div>
            <div class="select-div"><span>寧夏</span></div>
            <div class="select-div"><span>新疆</span></div>
            <div class="select-div"><span>臺灣</span></div>
            <div class="select-div"><span>香港</span></div>
            <div class="select-div"><span>澳門</span></div>
            <div class="select-div"><span>釣魚島</span></div>
            <div class="select-div"><span>海外</span></div>
       </div>
    </div>

   </div>
    </div>

<style>
        *{
            padding: 0;
            margin: 0;
        }
        var,i{
            font-style: normal;
        }
        .top{
            width: 100%;
            min-width: 1210px;
            background-color: #f1f1f1;
        }
        .top-content{
            width: 1210px;
            height: 30px;
            margin: 0 auto;
        }
        #cityselect{
            height: 30px;
            width: 95px;
            position: relative;
        }
        #city{
            height: 30px;
            width: 93px;
            line-height: 30px;
            font-size: 12px;
            display: inline-block;
            color: #666666;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            border-left: 1px solid #f1f1f1;
            border-right: 1px solid #f1f1f1;
        }
        #city.now{
            background-color: #ffffff;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            border-bottom: 1px solid #ffffff;
        }
        #city i{
            padding: 5px;
        }
        #select{
            padding: 10px;
            width: 291px;
            overflow: hidden;
            border: 1px solid #dddddd;
            background-color: #ffffff;
            display: none;
            position: absolute;
            top: 30px;
            left: 0;
        }
        #select>div{
            width: 58px;
            float: left;
            height: 24px;
            margin: 2px 0;
        }
        #select>div>span{
            display: inline-block;
            height: 24px;
            font-size: 12px;
            line-height: 24px;
            padding: 0 8px;
            cursor: pointer;
        }
        #select>div>span:hover{
            background: #f4f4f4;
            color: #c81623;
        }
        #select>div>.this-selec,#select>div>.this-selec:hover{
            color: #ffffff;
            background: #c81623;
        }

    </style>

js代碼：

   <script>
       /* var top = document.getElementsByClassName('top')[0];*/
       var cityselect = document.getElementById('cityselect');
       var city = document.getElementById('city');
       var cityvar = city.getElementsByTagName('var')[0];
       var select = document.getElementById('select');
       var selectdiv = select.getElementsByTagName('div');
       var selectspan = select.getElementsByTagName('span')[0];
        cityselect.onclick = function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            if(target.id = 'city'){
                alert(123);
                city.className = 'now';
                select.style.display = 'block';
            };
            if(target.parentNode.className == 'select-div' && target.nodeName == 'SPAN'){
                alert(234);
                console.log(e);
                console.log(target.parentNode.className);
                cityvar.innerHTML = target.innerHTML;
                select.style.display = 'none';
            };
        }
    </script>