<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>code.js.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html{margin:0;padding:0;font-size:12px;font: 12px/1.5 arial;background:#A2DDEF;}
#head{background:#454545;height:110px;}
.shell{margin:20px 0 0 50px;}
.shell strong{background:#606060;color:#eee;font-size:16px;padding: 5px 20px;margin-left:60px;}
.shell span{color:#fff;font-size:12px;margin-left:10px;cursor:pointer;}
#logo img{border:none;}
#menu{position:absolute;background:#515151;color:#eee;padding:4px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu li a{display:block;font-size:14px;color:#fff;text-decoration:none;zoom:1}
#menu li a:hover,#menu li.focus a{background:#606060;}
#menu li{float:left;display:inline;width:78px;line-height :25px;text-align:center;margin-left:4px;}
#menu ul{border-bottom:1px dashed #666;float:left;padding:5px;width:340px;}
.menufoot{clear:both;text-align:right;padding:10px;}
.menufoot a{color:#339999;text-decoration:none;padding:5px 10px;}
.menufoot a:hover{background:#606060;color:#339999;text-decoration:none;}
.nav{background:#44ABAF;height:70px;border-top:4px solid #338888;}
</style>
</head>
<body>
<div id="head">
<div class="shell"><a href="###" id="logo"><img src="http://www.meituan.com/static//css/i/logo.gif" alt="" /></a>
<strong>深圳</strong><span id="menuBtn">切换城市</span></div>
</div>
<div class="nav"></div>
<div id="menu" style="display:none;">
<ul>
<li><a href="" >北京</a></li>
<li><a href="" >上海</a></li>
<li><a href="" >武汉</a></li>
<li><a href="" >广州</a></li>
<li class="focus"><a href="" >深圳</a></li>
<li><a href="" >杭州</a></li>
<li><a href="" >南京</a></li>
<li><a href="" >成都</a></li>
<li><a href="" >天津</a></li>
<li><a href="" >西安</a></li>
<li><a href="" >福州</a></li>
<li><a href="" >重庆</a></li>
<li><a href="" >厦门</a></li>
<li><a href="" >青岛</a></li>
<li><a href="" >大连</a></li>
</ul>
<div class="menufoot"><a href="" >其它城市?</a></div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
ldh={
get:function (el){
return typeof el=="string"?document.getElementById(el):el;
},
on:function(el,type,fn){
el=this.get(el);
el.attachEvent?
el.attachEvent('on'+type,function(){fn.call(el,event)}):
el.addEventListener(type,fn,false);
return this
},
align:function (el,el2,x,y){
var rect=this.get(el2).getBoundingClientRect(),x=x||0,y=y||0;
el.style.top=rect.top+this.get(el2).offsetHeight+y+'px';
el.style.left=rect.left+x+'px'
},
stop:function (e){
e=e||window.event;
e.stopPropagation&&e.stopPropagation();
e.cancelBubble=true
},
onblur:function(el,fn) {
el=this.get(el);
this.on(el,'click',function (e){
ldh.stop(e)
}).on(document, 'click',function(e) {
el.style.display='none';
});
return this
}
};
ldh.onblur('menu').on('menuBtn','click',function (e){
var css=ldh.get('menu').style;
if(css.display!='none')return ;
ldh.align(ldh.get('menu'),this,-85,10);
css.display= 'block';
ldh.stop(e);
})
//]]>
</script>
</html>
本人JS菜鸟，上面是在网上找到的JS，但不知道怎样选择城市的时候，在切换城市边上的城市名称跟着也变。我选择哪一个城市，切换城市边上的城市名称也跟着变。。
比如原来是深圳，跳到北京。
下图的“深圳”换为“北京”下图深圳那个条目的class="focus"换到北京条目上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>code.js.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html{margin:0;padding:0;font-size:12px;font: 12px/1.5 arial;background:#A2DDEF;}
#head{background:#454545;height:110px;}
.shell{margin:20px 0 0 50px;}
.shell strong{background:#606060;color:#eee;font-size:16px;padding: 5px 20px;margin-left:60px;}
.shell span{color:#fff;font-size:12px;margin-left:10px;cursor:pointer;}
#logo img{border:none;}
#menu{position:absolute;background:#515151;color:#eee;padding:4px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu li a{display:block;font-size:14px;color:#fff;text-decoration:none;zoom:1}
#menu li a:hover,#menu li.focus a{background:#606060;}
#menu li{float:left;display:inline;width:78px;line-height :25px;text-align:center;margin-left:4px;}
#menu ul{border-bottom:1px dashed #666;float:left;padding:5px;width:340px;}
.menufoot{clear:both;text-align:right;padding:10px;}
.menufoot a{color:#339999;text-decoration:none;padding:5px 10px;}
.menufoot a:hover{background:#606060;color:#339999;text-decoration:none;}
.nav{background:#44ABAF;height:70px;border-top:4px solid #338888;}
</style>
</head>
<body>
<div id="head">
<div class="shell"><a href="###" id="logo"><img src="http://www.meituan.com/static//css/i/logo.gif" alt="" /></a>
<strong id="js_v">深圳</strong><span id="menuBtn">切换城市</span></div>
</div>
<div class="nav"></div>
<div id="menu" style="display:none;">
<ul>
<li><a href="#" >北京</a></li>
<li><a href="#" >上海</a></li>
<li><a href="#" >武汉</a></li>
<li><a href="#" >广州</a></li>
<li class="focus"><a href="" >深圳</a></li>
<li><a href="#" >杭州</a></li>
<li><a href="#" >南京</a></li>
<li><a href="#" >成都</a></li>
<li><a href="#" >天津</a></li>
<li><a href="#" >西安</a></li>
<li><a href="#" >福州</a></li>
<li><a href="#" >重庆</a></li>
<li><a href="#" >厦门</a></li>
<li><a href="#" >青岛</a></li>
<li><a href="#" >大连</a></li>
</ul>
<div class="menufoot"><a href="" >其它城市?</a></div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
ldh = {
get: function (el) {
return typeof el == "string" ? document.getElementById(el) : el;
},
on: function (el, type, fn) {
el = this.get(el);
el.attachEvent ?
el.attachEvent('on' + type, function () { fn.call(el, event) }) :
el.addEventListener(type, fn, false);
return this
},
align: function (el, el2, x, y) {
var rect = this.get(el2).getBoundingClientRect(), x = x || 0, y = y || 0;
el.style.top = rect.top + this.get(el2).offsetHeight + y + 'px';
el.style.left = rect.left + x + 'px'
},
stop: function (e) {
e = e || window.event;
e.stopPropagation && e.stopPropagation();
e.cancelBubble = true; },
onblur: function (el, id, fn) {
el = this.get(el);
id = this.get(id);
for (var i = 0; i < el.getElementsByTagName("a").length; i++) {
(el.getElementsByTagName("a")[i].onclick = function () {
for (var m = 0; m < el.getElementsByTagName("li").length; m++) {
el.getElementsByTagName("li")[m].className = "";
}
id.innerHTML = this.innerHTML;
el.getElementsByTagName("li")[arguments.callee.x].className = "focus";
el.style.display = 'none';
}).x = i;
} return this;
}
};
ldh.onblur('menu', "js_v").on('menuBtn', 'click', function(e) {
var css = ldh.get('menu').style;
if (css.display != 'none') return;
ldh.align(ldh.get('menu'), this, -85, 10);
css.display = 'block';
ldh.stop(e);
});
//]]>
</script>
</html>
忘记这个A也要加个# <li class="focus"><a href="#" >深圳</a></li>不然会刷新页面的