万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

切换城市效果

lwting 2015-12-26 技术
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
.head .city{ width:60px; height:50px; float:left; padding-top:25px; margin-left:15px; margin-right:95px;}

.head .city a{color:#848484;}

.head .city span{ width:60px; height:25px; float:left;}

.head .city em{ width:60px; height:25px; float:left; font-size:12px;}

.city .area-list{display: none;position: absolute;

    width: 355px;

    border: 1px solid #eaeaea;

    border-bottom: 3px solid #eaeaea;

    background-color: #ffffff;

    margin-top: 10px; z-index:1000;}

.city .area-list li{padding: 10px 0px 10px 3px;}

.city .area-list a{display: inline-block;

    font-size: 12px;

    color: #666666;

    width: 56px;

    text-align: center;

    line-height: 24px;

    margin-right: -1px;

    margin-bottom: 6px;}

.city .area-list a:hover{background-color: #f67f09;border-radius: 2px;color: #ffffff}
</style>
</head>

<body>

<div class="city">
<span id="destoon_city">湖北</span>

<p><em><a href="javascript:;" title="点击切换城市" id="areashow">[切换城市]</a></em></p>

<ul class="area-list">
  <li>
    <a href="http://www.hosjoy.com//api/city.php?action=go" rel="nofollow">湖北</a>
    <a href="#">武汉市</a>
    <a href="#">江岸区</a>
    <a href="#">江汉区</a>
    <a href="#">硚口区</a>
    <a href="#">汉阳区</a>
    <a href="#">武昌区</a>
    <a href="#">青山区</a>
    <a href="#">洪山区</a>
    <a href="#">东西湖区</a>
    <a href="#">汉南区</a>
    <a href="#">蔡甸区</a>
    <a href="#">江夏区</a>
    <a href="#">黄陂区</a>
    <a href="#">新洲区</a>
    <a href="#">更多</a>
  </li>
        </ul>
<script type="text/javascript">
$("#areashow").click(function(){
  $(".area-list").toggle();
  }); 
</script>
</div>

2015-12-26_112027.jpg2015-12-26_112041.jpg

文章关键词
jQuery
切换城市
qq qq tel
服务热线:

134-1954-9128