CSS+DIV+JS导航显示
平常大部分时间都在写后台代码。很少做前台界面的设计。这次，由于公司需要。做了一些界面设计方面的东西。
主要是用CSS+DIV+JS实现的一个导航。就是鼠标移动到不同的导航菜单上，显示不同的内容。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
padding:0;
text-align:center;
}
body{
font:12px "宋体";
text-align:center;
margin-top: 12px;
margin-bottom: 12px;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{ list-style:none;}
/*选项卡1*/
#Tab1{
width:460px;
margin:0px;
padding:0px;
margin:0 auto;}
/*选项卡2*/
#Tab2{
width:576px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
width:100%;
background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:114px;
text-align:center;
color:#949694;
font-weight:bold;
}
.Menubox li.hover{
padding:0px;
background:#fff;
width:116px;
border-left:1px solid #A8C29F;
border-top:1px solid #A8C29F;
border-right:1px solid #A8C29F;
background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);
color:#739242;
font-weight:bold;
height:27px;
line-height:27px;
}
.Contentbox{
clear:both;
margin-top:0px;
border:1px solid #A8C29F;
border-top:none;
height:181px;
text-align:center;
padding-top:8px;
}
.STYLE2 {font-size: 18px}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
<li id="one1" onmouseover="setTab('one',1,4)" class="hover"> <img id="hide1" src="image/zhandian1.png" /> </li>
<li id="one2" onmouseover="setTab('one',2,4)" ><img id="hide2" src="image/xianlu.png" /></li>
<li id="one3" onmouseover="setTab('one',3,4)"><img src="image/huanc.png" name="hide3" id="hide3" /></li>
<li id="one4" onmouseover="setTab('one',4,4)"> <img id = "hide4" src="image/gps.png" /></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">
<form>
<h3>站点查询</h3><br />
<span class="STYLE2">站点名称</span>
<input type="text" name="text1" size="18" maxlength="20">
</br>
<img src="image/search.png" name="hide4" vspace="10" id = "hide4" />
<img src="image/重置.png" name="hide4" hspace="20" vspace="10" id = "hide4" />
</form>
</div>
<div id="con_one_2" style="display:none">
<form>
<h3> 线路查询 </h3></br>
<span class="STYLE2">线路名</span>
<input type="text" name="text1" size="18" maxlength="20"></br>
<img id = "hide4" src="image/search.png" vspace="10"/>
<img id = "hide4" src="image/重置.png" hspace="20" vspace="10"/>
</form>
</div>
<div id="con_one_3" style="display:none">
<form>
<h3>换乘查询</h3></br>
<span class="STYLE2">起点</span><input type="text" name="text1" size="12" maxlength="20"></br>
<span class="STYLE2">终点</span><input type="text" name="text1" size="12" maxlength="20"></br>
<span class="STYLE2">乘车偏好：</span><select name="bus">
<option value="1">较快捷</option>
<option value="2">不换乘</option>
<option value="3">不步行</option>
<option value="4">多步行</option>
</select></br>
<img id = "hide4" src="image/search.png" vspace="10" />
<img id = "hide4" src="image/重置.png" hspace="20" vspace="10"/>
</form>
</div>
<div id="con_one_4" style="display:none">
<form>
<h3>GPS候车查询</h3></br>
<span class="STYLE2">站点名称</span>
<input type="text" name="text1" size="12" maxlength="20"></br>
<span class="STYLE2">线路号</span><select name="lineCode" >
<option value="1">B12</option>
<option value="2">45</option>
<option value="3">72</option>
<option value="4">68</option>
</select></br>
<span class="STYLE2">开往方向</span>
<select name="goWhere" >
<option value="1">火车站</option>
<option value="2">科学大道与石楠路</option>
<option value="3">大谢村</option>
<option value="4">化工路</option>
</select></br>
<img id = "hide4" src="image/search.png" vspace="10"/>
<img id = "hide4" src="image/重置.png" hspace="20" vspace="10"/>
</form>
</div>
</div>
</div>
<br>
</body>
</html>
显示界面：
- 大小: 16.5 KB
分享到：
相关推荐
在提供的文件列表中，"鼠标移动显示不同内容.html"可能是一个示例，展示了如何用JS实现鼠标悬停时显示隐藏信息的效果。"rss_03.gif"可能是用于导航栏中的图标，"萧山.jpg"可能是一个背景图片，而"bt1.PNG"和"bt2.PNG...
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
在网页开发中，JavaScript (JS)、层叠样式表(CSS) 和 分布式自定义元素(DIV) 是构建交互式用户界面的核心技术。"拖攥"功能是现代Web应用中常见的一种交互方式，允许用户通过鼠标或触摸设备直接操作元素进行移动。...
在这个示例中，通过`menuFix()`函数实现了当鼠标移动到主菜单项上时，对应的子菜单会自动显示出来。这里使用了DOM操作方法（如`getElementsByTagName`）以及事件监听器（如`onmouseover`）来实现这一功能。 ### ...
此外，可能会讲解到事件处理，比如点击、鼠标移动等用户交互事件，以及AJAX异步通信，实现页面无刷新的数据更新。 总的来说，这套笔记集合提供了一个全面的学习路径，从创建静态网页到实现动态效果，覆盖了网页制作...
- 布局管理：使用`display`属性（如`flex`或`grid`）创建响应式布局，使网站在不同设备上都能正常显示。 - 元素美化：通过设置`background-color`、`border-radius`、`box-shadow`等属性，提升用户体验，增加交互...
6. **响应式设计**：确保滑动选项卡在不同的设备和屏幕尺寸上表现良好，这需要运用媒体查询（Media Queries）来调整CSS规则，以适应移动设备和桌面电脑的差异。 7. **无障碍性**：对于残障人士，要确保选项卡组件...
在网页设计中，有时我们需要实现一个功能：当用户将鼠标悬停在某个div元素上时，显示特定的信息或另一个div。这个功能可以增强用户体验，帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能，并确保...
"收缩式导航菜单"是一种常见的交互设计模式，特别是在移动设备上，它可以节省屏幕空间，提高用户体验。这种菜单在未展开时通常只显示主要的导航选项，当用户点击时会展示更多子级菜单项。在本案例中，我们将深入探讨...
通过上述步骤，我们可以创建一个美观且功能完善的CSS+Div导航条，包含横向排列的下拉子菜单，并利用JavaScript增强其交互性和视觉效果。这种设计方法既满足了网页的基本需求，也提供了良好的用户体验。在实际开发中...
CSS+DIV的菜单控制是一种高效且灵活的方法，用于创建响应式和动态的导航菜单，提升用户体验。以下是对这些文件内容的详细解读： 1. **可左右平滑滚动的产品展示效果**： 这种效果通常应用于产品展示区域，用户可以...
每次移动时，计算鼠标的新坐标，然后用新的鼠标位置减去初始鼠标位置，得到偏移量，再将这个偏移量加到Div的初始位置上，从而改变Div的位置。 4. **释放处理**：最后，当鼠标释放(`mouseup`)时，停止监听`mousemove...
本主题“css+div二级目录”主要探讨如何利用这两种技术创建具有不同样式的标题二级目录，以提升网站的视觉效果和用户体验。在本文中，我们将深入探讨CSS和div在构建二级目录中的应用，并提供实例解析。 首先，了解...
这个实例主要展示了如何使用JavaScript来响应鼠标的移动事件，使一个HTML的`div`元素跟随鼠标移动，实现动态拖拽的效果。以下是对这个实例的详细解析： 首先，HTML部分创建了一个包含`divBody`、`divHead`、`...
本示例中，我们将探讨如何利用CSS3来实现一个动态特效：当鼠标悬停在DIV元素上时，特定部分高亮显示，而其余部分则变灰暗。这个效果可以增强用户界面的互动性和吸引力，帮助用户更好地聚焦于关键信息。 首先，我们...
CSS提供了丰富的选择器和布局模式，如盒模型、定位（positioning）、浮动（floating）等，使开发者能够精确地控制网页元素的位置和显示方式。 JavaScript是一种广泛使用的客户端脚本语言，常用于网页开发，它可以...
25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式导航菜单示例 28.博客Blog横向jquery动态滑动菜单插件示例 29.打包50种...
它可以监听用户的交互事件，如鼠标移动或触摸滑动，从而实时更新每个标签的位置和旋转角度。通常，我们可以通过JavaScript库，如Three.js或Pixi.js，来更方便地处理3D图形。这些库提供了强大的功能，如创建3D对象、...
这里的`<img>`标签用于展示原始图片，而`<div id="magnifier">`则是放大镜的容器，它将用于显示放大的图像部分。 接下来是CSS（层叠样式表），它的主要任务是设置布局样式和初始的放大镜效果。例如： ```css ....
同时，CSS3的媒体查询（media query）还能让游戏在不同设备上自适应显示，提升用户体验。 最后，JavaScript作为前端的核心语言，承担了游戏的逻辑处理和交互功能。在这个游戏中，JavaScript控制着飞机的移动、射击...