最近在寫京東，老師說等我們把京東整個頁面都寫完，以后再寫其他的頁面就會覺得好簡單啊，因為京東的首頁太麻煩，工作量太大。沒寫之前我覺得不就是比其他頁面長一些嘛，有什么大不了。可真正開始寫才發現，京東這個首頁哪里是麻煩，是特別麻煩！！！就頁面最頂部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>

總結

以上是生活随笔為你收集整理的js 京东地址选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。