javascript实战——tab切换

最新推荐文章于 2023-06-04 22:01:17 发布
最新推荐文章于 2023-06-04 22:01:17 发布
阅读量198 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41179401/article/details/79349363
版权

tab切换

1 布局一：

图示：

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>tab切换</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="containter">
	<div id="tab">
		<ul>
			<li  class="select"><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>
</body>
</html>

css:

*{
	margin: 0;
	padding:0;
	font-size: 12px;
}
#containter{
	width: 255px;
	height: 100px;
	background:#fff;
	border:1px solid #ccc;
	margin:10px;
}
#tab{
	width: 255px;
	height: 20px;
	background: #eee;	
}
#tab ul li{
	float: left;
	list-style-type: none;
	height: 20px;
	line-height: 20px;
	width:50px;
	text-align: center;
	border-right:1px solid #ccc;
	border-bottom: 1px solid #ccc;	
}
#tab ul li:last-child{
	border-right: none;
}
#tab ul li a{
	text-decoration-line: none;
	color: #000;
	display: block;
}
#tab ul li a:hover{
	background: #fff;
	color: #FF5000;
        font-weight: bold;
}
/*边框：li-right边框去掉最右边的
        li-bottom
        大边框*/
/*第一个是默认*/
#tab ul .select{
	color:#FF5000;

      background: #fff;
      border-bottom-color: #fff;
}

2 添加内容：


html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>tab切换</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="containter">
	<div id="tab">
		<ul>
			<li  class="select"><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 id="text">
		<div class="text" style="display: block;">
			<ul>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
			</ul>
		</div>
			<div class="text"  style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略2 </a></li>
				<li><a href="###">阿里集团战略2 </a></li>
				<li><a href="###">阿里集团战略2</a></li>
				<li><a href="###">阿里集团战略2 </a></li>
			</ul>
		</div>
			<div class="text" style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
			</ul>
		</div>
			<div class="text" style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
			</ul>
		</div>
			<div class="text" style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

css:

*{
	margin: 0;
	padding:0;
	font-size: 12px;
}
#containter{
	width: 255px;
	height: 100px;
	background:#fff;
	border:1px solid #ccc;
	margin:10px;
	overflow: hidden;
}
#tab{
	width: 255px;
	height: 20px;
	background: #eee;

}
#tab ul li{
	float: left;
	list-style-type: none;
	height: 20px;
	line-height: 20px;
	width:50px;
	text-align: center;
	border-right:1px solid #ccc;
	border-bottom: 1px solid #ccc;	
}
#tab ul li:last-child{
	border-right: none;
}
#tab ul li a{
	text-decoration-line: none;
	color: #000;
	display: block;
}
#tab ul li a:hover{
	background: #fff;
	color: #FF5000;
	font-weight: bold;
}
/*边框：li-right边框去掉最右边的
        li-bottom
        大边框*/
/*第一个是默认*/
#tab ul .select{
	color: #FF5000;
	background: #fff;
	border-bottom-color: #fff;
}
/*内容*/
#text {
	margin: 10px 0px 10px 25px;
}
#text .text ul li{
	float: left;
	list-style-type: none;
	width: 90px;
	height: 20px;
	padding-right:25px;
	padding-bottom: 15px;
}
#text .text ul li a{
	text-decoration-line: none;
	color: #666;
}
#text .text ul li a:hover{
	color: #FF5000;
}

图示：

3 tab切换

原理：1 当鼠标移到某个tab li上时，上面变化：所有li的class移除，同时被选中的添加默认class样式：select

下面内容变化：所有内容display变为none，同时被选中的变为block。

所有代码：

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>tab切换</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="containter">
	<div id="tab">
		<ul>
			<li class="select"><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 id="text">
		<div class="text" style="display: block;">
			<ul>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
				<li><a href="###">阿里集团战略1 </a></li>
			</ul>
		</div>
			<div class="text"  style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略2 </a></li>
				<li><a href="###">阿里集团战略2 </a></li>
				<li><a href="###">阿里集团战略2</a></li>
				<li><a href="###">阿里集团战略2 </a></li>
			</ul>
		</div>
			<div class="text" style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略3 </a></li>
				<li><a href="###">阿里集团战略3 </a></li>
				<li><a href="###">阿里集团战略3 </a></li>
				<li><a href="###">阿里集团战略3 </a></li>
			</ul>
		</div>
			<div class="text" style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略4 </a></li>
				<li><a href="###">阿里集团战略4 </a></li>
				<li><a href="###">阿里集团战略4 </a></li>
				<li><a href="###">阿里集团战略4</a></li>
			</ul>
		</div>
			<div class="text" style="display: none;">
			<ul>
				<li><a href="###">阿里集团战略5 </a></li>
				<li><a href="###">阿里集团战略5 </a></li>
				<li><a href="###">阿里集团战略5 </a></li>
				<li><a href="###">阿里集团战略5 </a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

css:

*{
	margin: 0;
	padding:0;
	font-size: 12px;
}
#containter{
	width: 255px;
	height: 100px;
	background:#fff;
	border:1px solid #ccc;
	margin:10px;
	overflow: hidden;
}
#tab{
	width: 255px;
	height: 20px;
	background: #eee;
}
#tab ul li{
	float: left;
	list-style-type: none;
	height: 20px;
	line-height: 20px;
	width:50px;
	text-align: center;
	border-right:1px solid #ccc;
	border-bottom: 1px solid #ccc;	
}
#tab ul li:last-child{
	border-right: none;
}
#tab ul li a{
	text-decoration-line: none;
	color: #000;
	display: block;
}
#tab ul li a:hover{
	background: #fff;
	color: #FF5000;
	font-weight: bold;
}
/*边框：li-right边框去掉最右边的
        li-bottom
        大边框*/
/*第一个是默认*/
#tab ul .select{
	color: #FF5000;
	background: #fff;
	border-bottom-color: #fff;
}
/*内容*/
#text{
	margin: 10px 0px 10px 25px;
}
#text .text ul li{
	float: left;
	list-style-type: none;
	width: 90px;
	height: 20px;
	padding-right:25px;
	padding-bottom: 15px;
}
#text .text ul li a{
	text-decoration-line: none;
	color: #666;
}
#text .text ul li a:hover{
	color: #FF5000;
}

javascript:

function getId(id){              //获取id的方法
	return document.getElementById(id);
}
window.οnlοad=function(){
	var tab=getId('tab').getElementsByTagName('li');     //#tab所有的li
	var text=getId('text').getElementsByTagName('div'); //#text所有的div
	for(var i=0;i<tab.length;i++){
		tab[i].id=i;
		tab[i].οnmοuseοver=function(){      
			for(var j=0;j<tab.length;j++){
				tab[j].className='';
				text[j].style.display='none';
			}
			this.className="select";
			text[this.id].style.display='block';
		}
	}
}

图示：



，

shaonian1996
关注
专栏目录
Bootstrap项目实战——架构视角介绍使用
心暖未晴
07-03 8246
微金所项目实战1. 搭建Bootstrap页面骨架及项目目录结构├─ /xxxxxxx/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的
四、JavaScript实战（上）
qq_52289068的博客
11-21 1071
文章目录四、JavaScript实战（上）（一）Web APIs 简介（二）DOM1、获取元素1.1 根据ID获取1.2 根据标签名获取1.3 H5新增获取元素方式1.4 获取body 元素 和 获取html元素2、事件概述2.1 事件源2.2 事件类型2.3 事件处理程序2.4 执行事件的步骤3、案例：改变元素内容4、操作元素4.1 修改元素属性4.2 修改表单属性4.3 修改样式属性4.4 总结5、案例5.1 案例1：关闭二维码5.2 案例2：显示隐藏文本框的内容5.3 案例3：密码框验证信息5.4 案
JavaScript Tab
07-27
NULL 博文链接：https://snowdymy.iteye.com/blog/765667
javascript——tab
weixin_34268610的博客
07-29 77
为什么80%的码农都做不了架构师？>>> ...
javascript--tab
码_龙的博客
05-03 571
Insert title here ul{ list-style-type:none; padding:0; } #tab li{ float:left; width:100px; height:30px; line-height:30px; font-size:22px; border:1px solid red; border-top-left-radius:5px
javascript的tab标签
西昆仑
03-13 2823
<br />这个是一篇原理性的文章<br />http://www.javaeye.com/topic/218610<br />使用JavaScript和CSS相结合，可以很容易实现这种效果，其实现原理如下： <br />    （1）将整个tab分成两个部分，第一部分为tab头，也就是上面中蓝色底的部分。第二部分为tab内容，也就是下面显示具体内容的部分。 <br /><br />     （2）在tab头中，可以包括多个选项卡，如新闻是一个选项卡、图片新闻是另一个选项卡。每一个选项卡，事实上就是一个超链
JavaScript tab页
weixin_30393907的博客
12-27 256
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>实践题 - 选项卡</title> 6 <style type="text/css"> 7 /* CSS样式...
【JavaScript】DOM实战练习之选项卡切换
最新发布
08-10
在这个“【JavaScript】DOM实战练习之选项卡切换”的主题中，我们将深入探讨如何利用JavaScript实现一个常见的UI交互功能——选项卡切换。 选项卡切换是一种用户界面设计模式，它将大量信息组织成可切换的分块，以...
微信小程序学习用demo：阿姨帮：tab切换
03-15
本示例“微信小程序学习用demo：阿姨帮：tab切换”是针对微信小程序中一个常见功能——Tab切换的实战教程。在这个项目中，我们将深入探讨如何在微信小程序中实现Tab组件的切换效果，并通过“wxa_ayb-master”这个...
JavaScript实战操作（DOM，BOM）
qq_43542290的博客
11-19 553
JS语法页面文档对象模型浏览器对象模型JSECMAScriptDOMBOM API 应用程序编程接口，就是一个工具，以便于能轻松实现想要完成的功能 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM） DOM 可以改变网页的内容、结构和样式 DOM树 文档：一个页面就是一个文档 document 元素：页面中的所有标签都是元素，element 节点...
javascript----一个Tab的JS
12-04
对JS初步学习者，很好的一个实例,希望大家讨论。。
Javascript—Tab切换
09-01
Javascript—Tab切换
javascript tab页效果实现
03-01
NULL 博文链接：https://xiaoa7.iteye.com/blog/280907
JavaScript——Tab切换
qq_35052286的博客
06-05 247
Document *{ margin:0px; padding:0px; } #d1{ border:1px solid red; width:500px; height:300px; } ul li{ list-style:none; float:left; width:90px; height:20px; text-align:center; bo
JavaScript Tab切换
Hello World ~
07-12 556
实现按钮点击切换 （1）HTML布局 Monday Tuesday Wednesday Life is always so we covered all over with cuts and bruises, but later, the injured area will beco
javascript tab切换
Hello,world!
08-14 661
http://www.w3.org/1999/xhtml"> javascript+css tab 切换菜单效果 http://c1.neweggimages.com.cn/WebResources/2009/Default/Css/frame091107.css" />  回到顶部     产品描述   规格参数   包装信息   保修条款
javascript 面向对象 Tab 案例
sinat_38324690的博客
07-05 204
1.主要有四个功能 （1）添加新的tab栏目 （2）删除tab栏目 （3）双击标题区域修改文字 （4）双击内容区域修改文字 2.抽取对象，分析功能模块 （1）抽取 tab 对象 （2）该对象具有切换功能 （3）该对象具有添加功能 （4）该对象具有删除功能 （5）该对象具有修改功能...
javascript案例40——tab导航栏（切换、添加、删除、修改）综合案例（es6面向对象、类的使用）
努力、拼搏、奋进
08-22 1883
es6面向对象、类的使用 tab导航栏（切换、添加、删除、修改）综合案例
JavaScript-tab切换【基础】
qq_44729219的博客
06-04 107
【代码】JavaScript-tab切换【基础】
javascript实战：两种tab切换实例教程
本文将深入探讨如何使用JavaScript实现两种不同的tab切换效果，特别是针对那些希望将理论知识应用于实践的开发者。首先，我们将参考"中国人民大学"官方网站的样式，通过背景图片和CSS样式来模拟一个动态的tab切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值