Dom编程（有子菜单的导航条 和 选项卡）

HTML选项卡与导航栏实现
最新推荐文章于 2023-01-02 21:27:42 发布
最新推荐文章于 2023-01-02 21:27:42 发布
阅读量548 收藏 2
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/melinda23096/article/details/38441669
本文介绍如何使用HTML和JavaScript实现选项卡切换效果及带有子菜单的导航栏功能，详细展示了代码结构与交互逻辑。

选项卡：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tab</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}

#tab{
	width:312px;
	margin:100px auto;
}

#tab ul{
	list-style:none;
}

#tabControl{
	border-top:solid 2px #206f96;
	width:310px;
	display:table;
}

#tabControl span{
	display:table-cell;
	text-align:center;
	font:14px/30px "宋体";
	height:29px;
	line-height:29px;
}

.info{
	color:#666;
	font-size:14px;
	line-height:30px;
}

#s1{
	border-left:1px solid #CFCFCF;
	border-right:1px solid #CFCFCF;
}

#s2{
	background-image:url(1.jpg);
	background-repeat:repeat-x;
	border-right:1px solid #CFCFCF;
	border-bottom:1px solid #CFCFCF;
}

#s3{
	background-image:url(1.jpg);
	background-repeat:repeat-x;
	border-right:1px solid #CFCFCF;
	border-bottom:1px solid #CFCFCF;
}

#info2{
	display:none;
}

#info3{
	display:none;
}
</style>

<script type="text/javascript">
function listXinWen(){
	document.getElementById("s1").style.background = "none";
	document.getElementById("s1").style.borderBottom = "none";
	document.getElementById("s2").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("s3").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("info1").style.display = "block";
	document.getElementById("info2").style.display = "none";
	document.getElementById("info3").style.display = "none";
}

function listTuPian(){
	document.getElementById("s2").style.background = "none";
	document.getElementById("s2").style.borderBottom = "none";
	document.getElementById("s1").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("s3").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";

	document.getElementById("info2").style.display = "block";
	document.getElementById("info1").style.display = "none";
	document.getElementById("info3").style.display = "none";
}

function listJunShi(){
	document.getElementById("s3").style.background = "none";
	document.getElementById("s3").style.borderBottom = "none";
	document.getElementById("s2").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("s1").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("info3").style.display = "block";
	document.getElementById("info2").style.display = "none";
	document.getElementById("info1").style.display = "none";
}
</script>
</head>

<body>
<div id="tab">

<div id="tabControl">
<span id="s1" onmouseover="listXinWen()">新闻</span>
<span id="s2" onmouseover="listTuPian()">图片</span>
<span id="s3" onmouseover="listJunShi()">军事</span>
</div>

<div id="info1" class="info">
<ul>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
</ul>
</div>

<div id="info2" class="info">
<ul>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
</ul>
</div>

<div id="info3" class="info">
<ul>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
</ul>
</div>

</div>
</body>
</html>

效果：




有子菜单的导航：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>navbar</title>
<script type="text/javascript">
function xianshi1(){
	document.getElementById("cd1").style.display = "block";
}

function yincang1(){
	document.getElementById("cd1").style.display = "none";
}

function xianshi2(){
	document.getElementById("cd2").style.display = "block";
}

function yincang2(){
	document.getElementById("cd2").style.display = "none";
}
</script>

<style type="text/css">
*{
	margin:0;
	padding:0;
}
#caidan{
	width:800px;
	margin:50px auto 5px;
	background-color:#CCC;
	height:35px;
}
#caidan ul{
	list-style:none;
}
#caidan ul li.mu{
	width:100px;
	margin-right:10px;
	background-color:#FC0;
	float:left;
	height:35px;
	text-align:center;
	line-height:35px;
	position:relative;
}
#cd1{
	width:150px;
	position:absolute;
	padding-top:5px;
	display:none;
}
#cd1 ul{
	list-style:none;
}
.zi{
	background-color:#3C0;
}

#cd2{
	width:120px;
	position:absolute;
	padding-top:5px;
	display:none;
}
#cd2 ul{
	list-style:none;
}

#content{
	width:800px;
	background:#FFC;
	margin:0 auto;
}
</style>
</head>

<body>
<div id="caidan">
<ul>
    <li class="mu" onmouseover="xianshi1()" onmouseout="yincang1()">
        <a href="#">菜单项目</a>
        <div id="cd1">
        	<div class="zi">
            <ul>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            </ul>
           </div>
        </div>
    </li>
    <li class="mu" onmouseover="xianshi2()" onmouseout="yincang2()">
        <a href="#">菜单项目</a>
        <div id="cd2">
        	<div class="zi">
            <ul>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            </ul>
           </div>
        </div>
    </li>
    <li class="mu"><a href="#">菜单项目</a></li>
    <li class="mu"><a href="#">菜单项目</a></li>
    <li class="mu"><a href="#">菜单项目</a></li>
</ul>
</div>

<div id="content">
爱我中华爱我中华爱我中华爱我中华爱我中华爱我中华
</div>
</body>
</html>

效果：




Dom——下拉菜单
zx2014567296的博客
07-17 1078
下拉菜单 案例展示 效果如上图所示，当鼠标经过最上面的内容时出现下拉菜单，鼠标移开则隐藏。当鼠标移动到下拉菜单的选项时该选项背景颜色改变，如下图所示。 核心思想 上方内容用ul和li，每个li内包含超链接a；下拉菜单部分也是用ul和li。 为了能够让每个li都有鼠标经过事件，需要为所有li遍历获取，注册事件。 鼠标经过上方时，下拉菜单显示；鼠标离开上方和下拉菜单时隐藏。 代码 html部分 <ul class="nav"> <li> <a hr
黑马JavaScript核心操作BOM与DOM课程笔记1-DOM
weixin_42413901的博客
04-25 849
一、Web APIs 简介 此部分的目标：能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性； 能够说出什么是 API； 能够说出什么是 Web API. 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 2. API 和 Web API 2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软
原生dom实现导航栏_DOM导航
cumtv80668的专栏
07-30 452
原生dom实现导航栏We know that whenever a web browser loads a web page, it renders an HTML DOM which is a tree-like data structure that is manipulated using JavaScript. This tree is generic and is usually cal...
javascript DOM 带下拉子菜单的导航菜单
limlimlim的专栏
01-07 936
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                 body { font-family: Verdana; font-size: 12px; line-height: 1.5; }         a { color: #
Python脚本控制的WebDriver 常用操作 <十五> 处理Navigation Bar
weixin_33885253的博客
12-12 196
下面将使用WebDriver来模拟操作：选择一个Navigation bar的选项 测试用例场景 Navigation Bar可以看作是简单的类似于tab的导航栏。一般来说导航栏都是ul+li。先定位ul再去层级定位li中的link基本就能解决问题（一般情况下） Python脚本 测试用HTML代码： <html> <he...
HTML DOM 导航
冷月醉雪的博客
05-16 1759
HTML DOM 节点列表    getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World!
开发原创JS界面控件：菜单、对话框、进度条等
这些控件在构建动态交互式网页界面时至关重要，包括菜单、对话框、进度条、选项卡和树形控件。下面将分别详细介绍这些控件以及它们在网页设计中的应用和开发要点。 ### 菜单（Menu） 菜单控件是用户界面中常见的...
Jquery选项卡插件实现：源码免费下载指南
随着前端技术的发展，Tabs选项卡和jQuery插件也在持续进化，例如： - **与现代前端框架的融合**：例如React、Vue和Angular等，使得在这些框架中使用jQuery插件成为可能。 - **增强的用户体验**：未来的Tabs插件可能...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7261
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
JS的经典封装，有下载好的有实例
07-28
3. **TAB选项卡**：这是一种常见的用户界面元素，用于组织和展示大量信息。JS负责处理点击事件，切换显示的内容区域，以及保持选中状态的同步。 4. **折叠菜单**：折叠菜单允许用户隐藏或显示子菜单，节省页面空间...
DOM事件之简约下拉菜单
02-18
通过设置鼠标事件和键盘事件，实现下拉菜单的效果变换，界面简约，代码实用易学。
自己整理的一个导航菜单页面
05-22
自己整理的一个导航菜单页面，导航有下拉菜单，列表纵向排列数据，session判断失效，获取session的值等等，内容比较零散
菜单栏--Dom选择器
qq_29069777的博客
10-25 173
制作一个左侧菜单栏，包含菜单目录和内容 点击菜单栏才会展示内容，否则隐藏内容 　　 二、事例 　　2.1 菜单栏基本样式　 <body> <div style="height: 48px;w...
导航栏动画特效（dom实现）
qq_41335337的博客
09-30 1128
想用纯dom搞一个简单的导航栏特效，本以为一个小时就能搞好，哎对dom理解不够深，一直搞了一下午。。。。。。 html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;ti
DOM实现展开菜单
HeWar_的博客
10-15 228
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t...
JavaScript学习笔记（DOM 导航、节点、集合、节点列表）
Clover的博客
05-27 766
JavaScript学习笔记（DOM 导航、节点、集合、节点列表）@[TOC](JavaScript学习笔记（DOM 导航、节点、集合、节点列表）)DOM节点节点关系：在节点之间导航子节点和节点值1. 取出h1元素中的文本并复制到P元素中：(第一种)2. 取出h1元素中的文本并复制到P元素中：(第二种)3. 取出h1元素中的文本并复制到P元素中：(第三种)JavaScript HTML DOM 元素（节点）添加和删除节点(HTML元素)创建新的HTML元素-insertBefore()删除已有HTML元素（
【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素...
weixin_30604651的博客
03-31 160
一、操作属性 1、什么是属性： <div class="div" id="div1" style="" ></div> 其中class id style 都是这个div的属性 <input type="button" value="这是一个按钮" disabled="disabled" aa="haha" /> disabled="dis...
js学习之HTML DOM事件和导航
肥猫钓鱼
12-15 187
[color=brown][size=medium]这两个内容差不多是w3school对HTML DOM的最后的介绍了,学完以后再去学下js和jquery之类的[/size][/color] [size=medium]HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。[/size] [size=medium][b]对事件作出反应 [/b][/size] [si...
【前端-作业·】利用DOM和JS：一个下拉菜单的制作~
next_tech的博客
12-30 1285
写在前面的话：今天的新老师讲DOM，应用了各种鼠标点击和移除等事件案例。十分有趣。以下这个案例根据老师布置的一个简单下拉菜单作业来做的。 其中需要注意的细节很多。应用领域一般在电商平台首页的顶部：当鼠标滑过，就会弹出一个Block。鼠标离开，恢复原来的形状。又比如某些手机官网如魅族，应用的是左侧的弹出block的方式。http://store.meizu.com/这是他们的官网。 效果是一样的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值