网页切换弹出切换城市层的简单研究

最新推荐文章于 2021-08-05 17:28:07 发布
原创 最新推荐文章于 2021-08-05 17:28:07 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #class #div #javascript #html

本文介绍了一个简单的网页中实现城市切换功能的方法。通过JavaScript控制显示和隐藏城市列表，并利用鼠标悬停事件展示不同城市链接。涉及HTML结构设置及基本DOM操作。
<html>
<head>
<title>NameTitle</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</head>

<SCRIPT language=javascript >
function switchinCity()
{
    document.getElementById("site_Nav").style.display="";
    document.onclick=hideinCity;
        
    var lia=document.getElementById("site_Nav").getElementsByTagName("li");
    for(var i=0;i<lia.length;i++)
    {
        lia[i].onmouseover=showCity;
        lia[i].onmouseout=showCity;
    }
}

function hideCity()
{
    document.getElementById("site_Nav").style.display="none";
}
function showCity()
{
    document.getElementById("site_Nav").style.display="";
}

function hideinCity(e){
    var obj=e?e.target:event.srcElement;
    if(obj.id!="site_Nav"&&obj.id!="switchCitybtn"){
        document.getElementById("site_Nav").style.display="none";
        document.getElementsByTagName("body")[0].onclick= function(){};
    }
}
</SCRIPT>

<body>
<FORM id=formsearch name=formsearch method=get target=_blank>

<DIV id=t_sitename>上海站 
<SPAN id=switchCitybtn onmouseover=switchinCity()>[切换城市]</SPAN>
</DIV>

<DIV id=site_Nav style="DISPLAY: none" onmouseout=hideCity()>
<LI class=l_li>
<SPAN class=fontred>上海</SPAN>　 
<A href="http://bj.studyget.com/">北京</A> 　
<A href="http://gz.studyget.com/">广州</A>　 
<A href="http://tj.studyget.com/">天　津</A>　 
<A href="http://wh.studyget.com/">武汉</A>　 
<A href="http://sz.studyget.com/">深圳</A> 
</LI>

<LI class=l_li>
<A href="http://nj.studyget.com/">南京</A> 　
<A href="http://hz.studyget.com/">杭州</A> 　
<A href="http://xa.studyget.com/">西安</A> 
<A href="http://sjz.studyget.com/">石家庄</A> 　
<A href="http://dl.studyget.com/">大连</A>　 
<A href="http://jn.studyget.com/">济南</A> 
</LI>

<LI class=l_li><A href="http://cq.studyget.com/">重庆</A>　 
<A href="http://qd.studyget.com/">青岛</A> 　
<A href="http://cs.studyget.com/">长沙</A> 
<A href="http://hrb.studyget.com/">哈尔滨</A> 　
<A href="http://hf.studyget.com/">合肥</A> 　
<A href="http://sy.studyget.com/">沈阳</A> 
</LI>

<LI class=l_li>
<A href="http://cc.studyget.com/">长春</A> 　
<A href="http://zc.studyget.com/">郑州</A> 　
<A href="http://fz.studyget.com/">福州</A> 
<A href="http://nc.studyget.com/">南　昌</A> 　
<A href="http://cd.studyget.com/">成都</A> 
</LI>
</DIV>

</FORM>
</body>
</html>
 
MPU
关注
专栏目录
js弹出层 城市切换效果
03-11
js弹出层 城市切换效果js弹出层 城市切换效果
js弹出层风格的全国城市选择菜单.rar
07-10
《JS弹出层风格全国城市选择菜单的实现与解析》 在网页设计中，用户交互体验是至关重要的因素之一，而高效、友好的选择菜单则是提升用户体验的关键元素。本篇文章将详细探讨“js弹出层风格的全国城市选择菜单”的...
城市切换
TianGaojie123abc的专栏
08-22 5097
code.js.cn                 body, html         {             margin: 0;             padding: 0;             font-size: 12px;             font: 12px/1.5 arial;             background: #A2DDEF
php 多城市切换,php实现多城市切换特效
weixin_29174141的博客
03-10 289
本文给大家主要分享的是在PHP中如何获取用户IP地址、PHP根据IP判断用户所在城市以及PHP根据IP实现城市切换或跳转的问题。我们先来看下个人常用的代码PHP 切换城市 jQuery(function(){ $("#changeCity").click(function(a){ $("#allCity").slide...
实现城市切换的JS弹出层效果
通过监听按钮点击事件来切换弹出层的显示和隐藏状态。 ### 结语： 通过上述的实现方法和代码示例，我们可以清晰地了解到如何使用JavaScript创建弹出层以及实现城市切换效果。这需要我们掌握HTML、CSS和JavaScript...
js 机票城市选择 下拉层+弹出层 兼容iframe
09-15
在这个特定的项目中，我们关注的是如何使用JavaScript实现机票城市选择的功能，同时结合下拉层和弹出层的设计，并确保在不同浏览器以及iframe环境下都能正常工作。 首先，我们需要理解下拉层和弹出层的概念。下拉层...
jquery实现仿51job弹出层城市选择效果源码.zip
11-07
《jQuery实现仿51job弹出层城市选择效果详解》 在网页开发中，交互性和用户体验是至关重要的因素，而弹出层（popup）作为常见的一种交互方式，被广泛应用于各种场景，如表单填写、信息提示等。51job网站的城市选择...
使用jQuery实现城市切换与计算器的效果
u_u2020的博客
08-05 226
我们先写城市切换，我们已经引入了bootstrap框架里面的css与js，所以我们只需要将我们需要的类引入就好了。 我们先放一个div，给他一个类为container，Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中--这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。 我们在div...
城市切换 通用切换代码
09-08
用于分站间城市切换的JS代码,下拉菜单的样式
jQuery/CSS3天气预报插件 可切换城市
08-23
之前我们向大家分享过一款非常高端的HTML5 SVG天气预报动画卡片，可以对不同的天气模拟相应的画面。今天我们要介绍的同样是一个播报天气预报的界面，使用jQuery和CSS3技术实现，与前一个不同的是，这款jQuery天气预报插件的特点在于可以动态切换城市，通过天气预报网站相关接口数据的读取来显示不同城市的天气情况，同时插件还可以设置天气预报界面需要显示的相关元素。
HTML5+CSS3 城市选择器
06-16
使用HTML+css3写的城市选择器。实现了城市多选了单选功能。支持最多选择三个城市。 适合下载下来作为一个参考的demo。
选择城市(HTML)
09-14
简单的选择城市HTML
按字母选择城市html+js代码
11-24
实现输入城市简拼，实现城市下拉查询，感觉还行
PHP，Jquery，Ajax城市切换及分类切换（二级分类，三级分类）
52CRACKING
11-28 189
效果图如下： 分类 Html代码： //+------------------------------ //|分类 //+------------------------------ <tr> <tdalign="right">分类：</...
html 城市选择,城市选择
weixin_35899659的博客
06-05 1748
例子1var provinceArray = [{name:'四川省', citys:['成都市','德阳市', '绵阳市', '巴中市', '宜宾市', '达州市']},{name:'云南省', citys:['昆明', '漓江', '玉溪', '大理', '西双版纳']},{name:'辽宁省', citys:['沈阳', '大连', '铁岭', '盘锦']}]//省provinceNode ...
JavaScript(JS)实现省市联动选择下拉列表
didingwan3441的博客
05-26 801
在开发一个应用的时候需要用刀省市联动的下拉列表，网上找到不少。但是要么太复杂，难以修改；要么根本就用不了，最后自己在一个示例中提取出数据，然后自己写了一个，简单易懂，适合新手... 代码如下： Province_city.js var objprovince=document.getElementById("province"); var objcity=documen...
JS+DIV切换城市。
hecheng_job的博客
03-10 605
[b]city.html[/b] [code="html"]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值