开启左侧

[学习借鉴] 测试代码:主要城市切换

[复制链接]
发表于 2016-9-15 02:09 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
<!--城市切换 -->. r9 |! M/ [! H# |0 y. e
<style type="text/css"> " n+ b, ]# D# d2 N/ [9 M0 L
#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
" d1 o0 D* D# h/ q+ O- b#warpper{ position: relative; z-index:1000000; margin-top:20px;}: o* s! a/ Z' i% H, G' x
#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}4 K/ P6 V: C8 \( h# k
#city a{ cursor:pointer; color:#666}) K  d* X' ^" k
#city dl{ height:18px; line-height:18px; padding:0 10px;}
# B2 T5 r' ^" P+ e- j#city dt,.normal{ float:left; padding:0 10px 0 0 ; border-right:0px solid #ccc; text-decoration:none; width:auto; cursor:pointer; color:#FF3300; font-weight:bold;}
! u" n0 \5 [8 }6 n  {( o! Z#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }
9 d& D' K) ~1 ^2 N' r0 X) i#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}0 I6 I+ ]% j* z! m1 G2 U3 ?3 }  T
#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }: b' [/ q) J' V. q
#city dl dd{ position:absolute; width:160px; left:0;top:20px!important; border:1px solid #bbb; background:#fff; filter:progidXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:3px 0;}3 K8 i" P  r9 n9 \- \) @
.block{ display:block;}2 A" y/ c/ E1 x# o
.none{ display:none;}& y/ `* q, t5 C7 G- }+ `* c0 L
</style>
/ i. \& s% P9 o# `- s0 F; d7 B$ \<script language="javascript"> : G8 f, h' X: d* }! J( T1 a
function $(str){ return document.getElementById(str);}
5 {1 `4 b8 d: y$ }1 h8 Vfunction $$(str){ return document.getElementsByTagName(str);}9 U2 Z6 z/ j4 M. }1 V, J' b
var timer;$ z; Q0 Q- u. R8 u* I$ I8 |
function changeMenu(thisObj,num){0 B1 [% V% p( w+ e7 d
if(thisObj.className=="over") return false;
- z  P( I% j. v  f- \( Y$ ?hids(thisObj);
* X* G; a" Q' P7 y% hthisObj.className="over";
- A2 L! t/ P6 U. _% V8 c% G$("c"+(num+1)).className="block";* a& |6 h: F0 v/ S2 w' O

8 ^- R' o$ U! v$ a6 U2 w5 J$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}
* ~" }" N$ J( s1 f! K' b) X$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}& s, H: w, s( B: M
thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}. a% `) w: X& v1 i
/ a. w1 S( C0 a2 p1 M( O
}. f# b. d7 A) V; G2 G
function hids(thisObj){
1 C  J% b. T* R2 j( [clearTimeout(timer);
6 S1 E# `2 J6 C5 k+ {+ e4 u, gvar tabObj=thisObj.parentNode.getAttribute("id");
: C' b+ I/ f! q5 h+ t* pvar obj_dt=$(tabObj).getElementsByTagName("dt");# C( g/ N& c* A( B0 f# k
for(var i=0;i<obj_dt.length;i++){* u8 m# g- n/ L" h* B
obj_dt.className="normal";
0 A. Z& a! _  Y8 a8 a. J4 c$("c"+(i+1)).className="none";
" ]  B: M0 l9 ?' l- [}
/ M! d! f- q' F}3 ~4 g/ X0 `: |6 C# w# o0 }- p5 n+ A4 a
</script>. ?4 V0 O  T; n; E3 }2 R
<div id="city">7 c6 E( ~3 D) u$ a0 \3 ?
<dl id="warpper">
$ E" c) r$ s: y  R" i2 D, Z8 ~<dt>[北美主要城市]</dt>
3 k  E: J- i, U/ U& }9 Y$ f<dd id="c1" class="none">
2 }* d+ O. W" ^' s% n<ul>& U7 e- a; U. m% N5 X) S$ j3 t1 Q
<li><a href="xxx.html">洛杉矶</a> <a href="xxx.html">尔湾</a> <a href="xxx.html">旧金山</a> <a href="xxx.html">圣地亚哥</a> <a href="xxx.html">圣何塞</a> <a href="xxx.html">西雅图</a> <a href="xxx-1.html">纽约</a> <a href="xxx-1.html">波特兰</a> <a href="xxxx.html">奥兰多</a> <a href="xxxx.html">波士顿</a> <a href="xxxx.html">温哥华</a> <a href="xxxx.html">多伦多</a> <a href="xxxx.html">卡尔加里</a> <a href="xxxx.html">蒙特利尔</a>
0 P9 j7 S% S; m! `</li>8 S4 G' H- V( n# Y. U  `
</ul>
1 b" g& p- g8 Q. f* O</dd>
2 ~: l  f( a& N</dl>) V( F+ |* v% m) `
0 ?& i" g& P, O, z* X
</div>
' \- j' y9 B: {- b7 I; E# Q<!--城市切换_结束--># {$ Q. h* ^( W% D) Y
: z  V* h/ A, g6 H+ @4 N6 F
" Y9 L; k3 _0 N, k; C


转载请保留当前帖子的链接:https://www.beimeilife.com/thread-30675-1-1.html 谢谢
发表于 2016-9-15 11:45 | 显示全部楼层
看到测试结果了。

点评

各个城市的地产交易查询,可以上线了吗?  详情 回复 发表于 2016-9-16 12:14
发表于 2016-9-16 12:14 | 显示全部楼层
http://www.beimeilife.com/forum.php?mod=redirect&goto=findpost&pid=55897&ptid=30675
/ k1 x! n: h$ l0 C: G" M1 n看到测试结果了。
; i) G! Q$ U* U: M: m
各个城市的地产交易查询,可以上线了吗?

使用高级回帖 (可批量传图、插入视频等)快速回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则   Ctrl + Enter 快速发布  

发帖时请遵守我国法律,网站会将有关你发帖内容、时间以及发帖IP地址等记录保留,只要接到合法请求,即会将信息提供给有关政府机构。
快速回复 返回顶部 返回列表