开启左侧

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

[复制链接] 2
回复
1450
查看
打印 上一主题 下一主题
楼主
跳转到指定楼层
发表于 2016-9-15 02:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
<!--城市切换 -->" d5 }3 K2 c5 k) U4 z
<style type="text/css">
9 |# s6 l! X- u#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
" K' Q, y8 K! k8 A) _#warpper{ position: relative; z-index:1000000; margin-top:20px;}
( w/ @/ d" f- H7 [# ?% h1 I9 b, f#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}
0 Y9 }0 k/ G! z7 n/ `#city a{ cursor:pointer; color:#666}
+ g" W- k( i' `. J) g1 _. `; M3 X#city dl{ height:18px; line-height:18px; padding:0 10px;}
+ I0 q& i# {! k% q; a#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;}5 v0 H7 `( a4 u5 s1 v8 ]5 e
#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }
3 P8 |& U8 p- C  F# H- i: D#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}
! z! ~8 I8 Z: {#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }5 j( w6 v  x; f0 ~0 Y" I+ P
#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;}% f* M* J" [& T+ y0 Q& e, ]" P3 x
.block{ display:block;}
# ]- e3 P, p6 q! j.none{ display:none;}
% g# ~' n6 |5 H6 Z$ F% G</style>
0 C! b9 x2 U" K  L3 l<script language="javascript"> 5 |5 i9 |0 u; n! \2 w. _: [
function $(str){ return document.getElementById(str);}
+ J- a$ z* k+ ~" {4 ^function $$(str){ return document.getElementsByTagName(str);}; o' ?, n' D' k' \% X2 p" g
var timer;0 c! r7 P$ K8 C+ a7 Z$ `5 _
function changeMenu(thisObj,num){
1 G1 R/ t  V# |  u% k9 P$ Zif(thisObj.className=="over") return false;
* I; M" }& W* k/ F; r9 Bhids(thisObj);
& ^( T( F2 M1 f: _* X0 y9 j: JthisObj.className="over";
! W! `' J( h& U, X$("c"+(num+1)).className="block";4 r$ e4 h$ S3 n8 f5 Z1 f, s
2 g& o6 N" R+ M- f$ s
$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}) j3 X9 B8 y" A
$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}5 t. J& W, J0 L& z
thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}; j# i6 n6 d  L8 V2 c
4 Z, O2 C! V$ p5 r) D. [
}# b, o/ C: N( J- C0 |! H) W( z4 N
function hids(thisObj){- F, U  o" U& Z% J4 f4 {: i
clearTimeout(timer);
2 N% @3 Q" [/ M( Z$ B/ @) }var tabObj=thisObj.parentNode.getAttribute("id");5 ~$ j9 ^8 v9 [( p+ R. j
var obj_dt=$(tabObj).getElementsByTagName("dt");
) @- g7 j5 h% n/ e# d) y/ yfor(var i=0;i<obj_dt.length;i++){# o7 F4 K" M0 K5 ]: f0 h$ c
obj_dt.className="normal";$ H% M0 V/ }2 B5 E0 F4 `, F) u! c
$("c"+(i+1)).className="none";* B" W; m2 T2 U( t7 O. b; C! e
}
5 _% }: P  d0 A4 v$ J}
  W$ L0 l. N3 F' c$ a</script>) t  w3 |4 n' G  S3 g+ g0 V" j
<div id="city"># M* ]5 P( ?7 k+ ~8 ]2 H2 s
<dl id="warpper">3 F9 v, R$ M& t
<dt>[北美主要城市]</dt>5 q! L2 E7 j# v, {
<dd id="c1" class="none">9 k9 |8 U# e: x+ q
<ul>
, T/ f( D: d, s2 u; @8 T) S<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>; r) A" ~/ m( H+ ?; o
</li>
7 V+ H( l, v" X* P+ C</ul>- y7 \0 r0 Y2 q$ i
</dd>' E, |6 s* u+ Z0 l$ [" T
</dl>2 h% y4 r7 |% S5 ^
, H7 y0 y( X, n1 c5 z1 {
</div>
. @1 S' w" B" @6 i# J<!--城市切换_结束-->
$ N, e2 }6 [4 s# j, H0 K, }/ J" b( p8 y$ p- a: H

/ ]: B0 @3 c1 v! ~


转载请保留当前帖子的链接:https://www.beimeilife.com/thread-30675-1-1.html 谢谢
沙发
发表于 2016-9-15 11:45 | 只看该作者
看到测试结果了。
板凳
发表于 2016-9-16 12:14 | 只看该作者
http://beimeilife.duckdns.org/forum.php?mod=redirect&goto=findpost&pid=55897&ptid=30675
/ v* K3 @) P; k# J8 W看到测试结果了。
' Z! n, y, k' }7 U* Q0 n
各个城市的地产交易查询,可以上线了吗?

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

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

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

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