JS---排他思想及Tab栏的切换

最新推荐文章于 2023-05-22 15:43:10 发布
最新推荐文章于 2023-05-22 15:43:10 发布
阅读量1w 收藏 29
点赞数 4
分类专栏： JS笔记 文章标签： javascript tab栏切换 排他思想 数组 循环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/F__Rong/article/details/76400813
版权

JS的排他思想及tab栏切换

一.排他思想

  1. 含义： 关于排他思想，我的理解就是先排除掉其他的(包括自己) ，最后再给自己(this)加想要的效果。
  2. 小思路：

a. 通过document.ElementsBytagName();选择需要的一类标签,获得一个伪数组

b.由于是伪数组的原因，而对数组的处理最多的是遍历，所以会用到for(); 通过循环可以排除掉其他（包括自己）

c.遍历后可以用this改变自己的样式

  1. 小tips：自定义属性

就像c语言一样，数组都会有下标（索引号），在遍历伪数组的时候就可以利用自定义属性记录它的索引号,如下 arr[i].index=i;

  1. 代码
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.bianse{
			background-color: pink;
		}
	</style>
	<script>
		window.οnlοad=function(){
			var buts=document.getElementsByTagName("button");
			for (var i=0;i<buts.length;i++) {
				buts[i].index=i;//记录索引号
				buts[i].οnclick=function(){
//					alert(this.index);在这验证了索引号
					for(var i=0;i<buts.length;i++)
					{
					
						//排除所有
						buts[i].className="";
					}
					this.className="bianse";  //给自己加样式
				}
			}
		}
	</script>
	<body>
		<button>点击后变色</button>
		<button>点击后变色</button>
		<button>点击后变色</button>
		<button>点击后变色</button>
		<button>点击后变色</button>
		<button>点击后变色</button>
		<button>点击后变色</button>
	</body>
</html>

二. Tab栏切换

  1. 小原理：

最外面一个大盒子，里面的上面一个盒子放按钮，下面一个盒子放divs，上下个数对应。点击按钮，按钮颜色变且相应的盒子出现。

  1. 小思路：

通过document.ElementsBytagName();获取两个伪数组，上面按钮的和下面对应divs的，循环里记录按钮的索引号，先使所有盒子隐藏但第一个显示，利用两次排他思想（可以合并为一次）改变按钮颜色和显示对应的盒子。

  3. 代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			input{
				outline: none;
			}
			#tab{
				width: 500px;
				margin: 100px auto;
			}
			#buttom div{
				width: 100%;
				height: 300px;
				background-color: pink;
				display: none;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var buts=document.getElementsByTagName("input");
				var divs=document.getElementById("buttom").getElementsByTagName("div");
				//两个数组的长度	alert(buts.length); alert(divs.length);  
				//换掉按钮的颜色  
				for (var i=0;i<buts.length;i++) {
					buts[i].index=i;//记住索引号
					buts[i].οnclick=function(){
						for (var i=0;i<buts.length;i++) {//排他思想
							buts[i].style.backgroundColor="";
						}
						this.style.backgroundColor="red";
						for(var j=0;j<divs.length;j++)
						{
							divs[j].style.display="none";
						}
						divs[this.index].style.display="block";
						//上面两个for可以合并
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="tab">
			<div id="top">
			<input type="button" name="" id="" value="按钮1" />
			<input type="button" name="" id="" value="按钮2" />
			<input type="button" name="" id="" value="按钮3" />
			<input type="button" name="" id="" value="按钮4" />
			<input type="button" name="" id="" value="按钮5" />
			</div>
			<div id="buttom">
				<div style="display: block;">第1个盒子</div>
				<div>第2个盒子</div>
				<div>第3个盒子</div>
				<div>第4个盒子</div>
				<div>第5个盒子</div>				
			</div>
		</div>
	</body>
</html>

 4. 效果



但是直接把上面的代码体复制成多个tab栏时就会出现如下错误：


这是因为每个tab栏之间没有区分点，会互相影响。所以下面5做出了改进。

5. 多个tab栏：
多个tab栏切换时需要用大盒子的id区分来封装函数，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 20px;
			}
			.box{
				width: 450px;
				margin: 0 auto;
				border: 1px solid red;
			}
			.mt{
				font-size: 0;/*去除display：inline-block中的间隙*/
				-webkit-text-size-adjust:none;/*谷歌*/
			}
			.mt span{
				display: inline-block;
				/*background-color: pink;      权重是100+1=101*/ 
				width: 90px;
				cursor: pointer;
				font-size: 20px;
				text-align: center;
			}
			.mb ul{
				list-style-type: none;
			}
			.mb li{
				width: 100%;
				height: 250px;
				background-color: plum;		  /*权重是100+1+1=102*/
				display: none;
			}
			.mt span.now{
				background-color: plum; /*权重应大于102*/
			}
			.mb li.nowbl{
				display: block;
			}
		</style>
		<script>
			window.οnlοad=function(){//多个Tab栏切换，应该用大盒子的id区分,封装函数
				function bigbox(bigid){
					var bigid=document.getElementById(bigid);//大盒子的id
					var spans=bigid.getElementsByTagName("span");
					var lis=bigid.getElementsByTagName("li");
					for(var i=0;i<spans.length;i++)
					{
						spans[i].index=i;
						spans[i].οnmοuseοver=function(){
							//排他思想
							for(var j=0;j<spans.length;j++)
							{//干掉所有的
								spans[j].className="";
								lis[j].className="";
							}
							//再给自己(this)赋值
							this.className="now";
							//alert(this.index);   此时鼠标经过的索引号为this.index
							lis[this.index].className="nowbl";  
						}
					}
					
				}
				bigbox("one");
				bigbox("two");
				bigbox("three");
				bigbox("four");				
			}
		</script>
	</head>
	<body>
		<div class="box" id="one">
			<div class="mt">
				<span class="now">新闻</span>
				<span>娱乐</span>
				<span>搞笑</span>
				<span>在线</span>
				<span>直播</span>
			</div>
			<div class="mb">
				<ul>
					<li class="nowbl">新闻模块</li>
					<li>娱乐模块</li>
					<li>搞笑模块</li>
					<li>在线模块</li>
					<li>直播模块</li>
				</ul>
			</div>
		</div>
		<div class="box" id="two">
			<div class="mt">
				<span class="now">新闻</span>
				<span>娱乐</span>
				<span>搞笑</span>
				<span>在线</span>
				<span>直播</span>
			</div>
			<div class="mb">
				<ul>
					<li class="nowbl">新闻模块</li>
					<li>娱乐模块</li>
					<li>搞笑模块</li>
					<li>在线模块</li>
					<li>直播模块</li>
				</ul>
			</div>
		</div>
		<div class="box" id="three">
			<div class="mt">
				<span class="now">新闻</span>
				<span>娱乐</span>
				<span>搞笑</span>
				<span>在线</span>
				<span>直播</span>
			</div>
			<div class="mb">
				<ul>
					<li class="nowbl">新闻模块</li>
					<li>娱乐模块</li>
					<li>搞笑模块</li>
					<li>在线模块</li>
					<li>直播模块</li>
				</ul>
			</div>
		</div>
		<div class="box" id="four">
			<div class="mt">
				<span class="now">新闻</span>
				<span>娱乐</span>
				<span>搞笑</span>
				<span>在线</span>
				<span>直播</span>
			</div>
			<div class="mb">
				<ul>
					<li class="nowbl">新闻模块</li>
					<li>娱乐模块</li>
					<li>搞笑模块</li>
					<li>在线模块</li>
					<li>直播模块</li>
				</ul>
			</div>
		</div>
	</body>
</html>

效果：


F__Rong
关注
  • 4
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
tab栏切换原理
11-28
本文是我学习tab栏切换时的笔记，步骤很详细。比较适用于JavaScript初学者 1.基础 – 排他思想 如图，点击任意一个按钮，当前按钮应该显示橘色，其他显示默认颜色灰色。 代码运行步骤： 利用for循环遍历5个按钮； 选中的按钮进行 onclick 事件时，首先删除所有按钮的类名，使其全部显示灰色（34行）； 然后给当前点击的按钮添加指定类名，使其显示橘色（37行）。 示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab栏切换效果</title> <style media="screen">
JavaScript排他思想
qq_61716556的博客
05-22 2000
什么是排他思想？ 排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。 排他思想的优势 排他思想适用于为多个同类型元素设置样式或效果的情况。避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变。 实现排他思想的步骤 为全部元素设置一般效果 为特定元素设置特定效果 <!DOCTYPE html> <html lang="en"> <head&gt
JavaScript中的tab栏切换制作（排他思想）
qq_46617150的博客
05-22 1178
tab_list部分只有点击才会有红色背景样式，如果点击了规格与包装，那么商品介绍的样式会被清空。同时，tab_con部分的显示内容跟随tab_list部分的点击发生改变。5.当我们点击tab_list里面的某个li，让tab_con里面的对应序号内容显示，其余隐藏（排他思想）整个页面分为2个部分，tab_list部分（上半部分）和tab_con部分（下半部分）tab_list部分包含5个li，它们分别与tab_con部分的5个div盒子一一对应。3.规律：下面的模块显示内容和上面的选项卡一一对应相匹配。
JavaScript【排他思想及其优化】
Coding
04-02 1869
JavaScript【排他思想及其优化】
排他思想+tab栏切换案例
LQlove1的博客
06-08 206
排他思想+tab栏切换案例
JavaScript之排他思想详述
m0_48375854的博客
11-25 3873
在前面的博客中，小熊更新了相关操作元素的方法，但是如果有同一组元素，我们想要某一个元素实现某种样式，这时需要怎么办呢？ 这里就要用到循环的排他思想。 排他思想的算法就是： 排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。 可以简单理解为： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 需要注意的是：这里的顺序不能颠倒。 比如，页面有五个按钮，我们想要给它实现循环点击事件：当点到哪个按钮，就让哪个按钮变
编程思维---排他思想
m0_73596760的博客
10-13 1627
JS 排他思想
（排他思想）用Javascript实现tab栏切换，并在下方显示不同的内容
茂茂的博客
01-31 1008
用Javascript实现tab栏切换，并在下方显示不同的内容 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 我们在逛网页的过程当中，通常会看见一排选择框，我们点击不同的选择框，那么便会出来所对应的内容，这个案例在各大网商平台应该非常的常见 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
【JavaScript】- 排他思想 tab栏切换
m0_55960697的博客
03-27 402
1. 干掉所有人 使用for循环 2. 复活他自己 通过this或者下标找到自己或者对应的元素 html： <div class="wrapper"> <ul class="tab"> <li class="tab-item active">国际大牌<span>◆</span></li> <li class="tab-item">国妆名牌<span>...
排他思想(算法)
休思_J的博客
05-29 5085
排他思想(算法) 给一组相同的元素添加相同的事件，利用for循环来实现。 代码验证 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1.
非排他性动态机制设计-研究论文
06-10
大部分分析都集中在排他性环境（即，任何参与者都可以被排除在交易之外，而不会影响其他人的效用）。 然而，文献中提出的机制并未扩展到非排他性环境。 这种环境的两个典型例子是：(i) 公共项目，所有参与者必须...
点击tab栏切换不同的图片.js
04-18
用到了排他思想 双重for循环 以及获取下标的方式
【JavaScript源代码】JavaScript实现简易tab栏切换案例.docx
12-29
　本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码，供大家参考，具体内容如下　tab栏分析　li里面的分析　js实现隐藏与显示　排他思想：　1）、所有元素全部清除样式（干掉其他人） 2）、给当前...
Flowable深入浅出-15 Flowable-BPMN操作流程之排他网关
01-29
Flowable深入浅出-15 Flowable-BPMN操作流程之排他网关,欢迎进入我的专栏第15节查看，专栏地址:https://blog.csdn.net/houyj1986/column/info/31755
理解JS的原型对象，构造函数，对象之间的关系
F__Rong的博客
10-21 1749
js原型对象，构造函数，对象的理解，以及Object.prototype对象中的一些方法
Js关于getElmentsByClassName()的兼容与封装
F__Rong的博客
08-01 1204
getElmentsByClassName()的兼容与封装
JS实现的瀑布流
F__Rong的博客
09-17 557
js实现的瀑布流
虚拟DOM和Diff算法
F__Rong的博客
12-16 296
 虚拟DOM 虚拟DOM其实就是在真实DOM之前加了一层JS对象生成的DOM 用JS对象模拟DOM 把这个虚拟DOM对象转为真实的DOM插入到页面中 如果有事件修改了虚拟DOM，比较两个虚拟DOM树的差异，得到差异对象（补丁） 把差异对象应用到正则的DOM树上  diff算法 Diff 比较两个虚拟DOM的区别（比较两个对象的区别） 根据两个虚拟对象的区别，创建出补丁（patch...
vue中v-for中的排他思想
最新发布
06-07
在Vue中，v-for指令用于渲染列表，如果要实现v-for中的排他思想，可以通过以下几种方式来实现： 1. 使用computed属性过滤数据 可以使用computed属性对数据进行过滤，然后在v-for指令中使用过滤后的数据进行渲染。在数据发生变化时，computed属性会重新计算，从而实现排他的效果。 2. 在v-for中使用v-if指令 在v-for指令中，可以使用v-if指令来控制某些元素的显示与隐藏。通过控制v-if指令的条件，可以实现排他的效果。 3. 使用Vue的事件机制 可以在v-for指令中使用Vue的事件机制来实现排他的效果。通过监听元素的点击事件，然后控制其他元素的状态，可以实现排他的效果。 需要注意的是，以上三种方式都可以实现v-for中的排他思想，具体实现方法需要根据实际情况进行选择。同时，在使用v-for指令时，也需要注意数据的更新方式，避免出现数据不一致的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值