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

最新推荐文章于 2024-03-23 01:24:48 发布
原创 最新推荐文章于 2024-03-23 01:24:48 发布 · 548 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用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
原生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!
菜单栏--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...
DOM事件之简约下拉菜单
02-18
通过设置鼠标事件和键盘事件，实现下拉菜单的效果变换，界面简约，代码实用易学。
自己整理的一个导航菜单页面
05-22
自己整理的一个导航菜单页面，导航有下拉菜单，列表纵向排列数据，session判断失效，获取session的值等等，内容比较零散
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/这是他们的官网。 效果是一样的
DOM-节点操作-下拉菜单制作
NY_21的博客
02-01 384
如上图是一个简易的下拉菜单栏，我们可以通过操作节点来达到目的。1. 导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件 2. 核心原理： 当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏 DOM-节点操作-下拉菜单制作
DOM（三）-05-(示例-下拉菜单-选择城市)
wy_0928的博客
08-20 845
<!-- 下拉菜单：选择城市 二级联动菜单，即在第一级下拉菜单先选择xx省，然后第二级下拉菜单自动跳转当前所选省的所有城市，再选择xx市 --> select{/*标签选择器*/ width:100px; } function selectCity(){ /* *由于第一级菜单的一个option对应第二级
寻找dom标签的练习（菜单隐藏）
Mr_zhang的博客
03-21 262
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .item .c1{ d
浏览器DOM操作基础：禁用右键菜单与阻止文字选中
最新发布
interest_ing_的博客
03-23 2373
在Web开发中，有时我们需要对用户的默认行为进行限制，以保护网站内容或提供更定制化的用户体验。两个常见的例子是禁止用户通过右键菜单访问上下文选项，以及阻止用户选中页面上的文字。本文将介绍如何使用JavaScript来实现这两个功能，以及它们背后的原理和可能的应用场景。
dom中固定导航的实现
m0_65169658的博客
04-04 388
js实现固定导航操作 思路：当滚动条滚动到某一位置时，动态更改固定定位的top值 固定导航的html结构 <div class="navbar"></div> <!-- 导航栏 --> <nav id="nav"> <ul> <li><a href="#">001</a></li> <li><a href="#"&gt
实现网易邮箱风格的可折叠选项卡功能教程
左侧菜单和右侧的每个选项卡通常都会有一个独立的div，用于单独控制和布局。 - 通过在HTML中预设一个隐藏的div元素（比如通过CSS设置display属性为none），可以存储那些在点击左侧菜单后应该出现的选项卡内容。 - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值