tab 切换 利用排他思想

最新推荐文章于 2022-08-29 18:09:52 发布
最新推荐文章于 2022-08-29 18:09:52 发布
阅读量300 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37137999/article/details/80649678
版权
tab 切换原理：利用排他思想，隐藏所有，当前对应的显示 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 400px;
				height: 420px;
				margin: 100px;
				border: 1px solid #5EFF5E;
			}
			#bottom{
				width: 400px;
				height: 400px;
			}
			#bottom div{
				width: 400px;
				height: 400px;
				background: #DFFFDF;
				display: none;
			}
			.btn{
				background-color: #FF6B39;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btns = document.getElementById("top").getElementsByTagName("button");
				var divs = document.getElementById("bottom").getElementsByTagName("div");
				
				for(var i=0; i<btns.length; i++){
					//设置当前btn索引,自定义属性
					btns[i].index = i;
					btns[i].onclick = function(){
						for(var j=0; j<btns.length; j++){
							btns[j].className = "";
						}
						//当前的btn 类名设置为btn
						this.className = "btn";
						for(var i=0; i<btns.length; i++){
							//隐藏所有的div
							divs[i].style.display = "none";
						}
						//当前对应btn索引号的div显示
						divs[this.index].style.display = "block";
					}
					
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="top">
				<button>1</button>
				<button>2</button>
				<button>3</button>
				<button>4</button>
				<button>5</button>
			</div>
			<div id="bottom">
				<div style="display: block;">11</div>
				<div>22</div>
				<div>33</div>
				<div>44</div>
				<div>55</div>
			</div>
		</div>
	</body>
</html>

tab  切换封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 400px;
				height: 450px;
				overflow: hidden;
				margin: 200px auto;
				border: 1px solid #5EFF5E;
			}
			.top span{
				display: inline-block;
				line-height: 50px;
				height: 50px;
				width: 90px;
				text-align: center;
				background-color: #ACFFAC;
			}
			.bottom li{
				width: 100%;
				height: 400px;
				background-color: #FF6B39;
				display: none;
			}
			.top span.span{
				background-color: #FF6B39;
			}
		    .bottom li.display{
				display: block;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//tab 封装函数
				function tab(obj){
					var target = document.getElementById(obj);
					var spans = target.getElementsByTagName("span");
					var lis = target.getElementsByTagName("li");
					
					for(var i=0; i<spans.length; i++){
						spans[i].index = i;
						spans[i].onmouseover = function(){
							for(var j=0; j<spans.length; j++){
								spans[j].className = "";
								lis[j].className = "";
							}
							this.className = "span";
							lis[this.index].className = "display";
						}
					}
				}
				tab("one");
				tab("two");
				tab("three");
			}
		</script>
	</head>
	<body>
		<div class="box" id="one">
			<div class="top">
				<span class="span">11</span>
				<span>22</span>
				<span>33</span>
				<span>44</span>
			</div>
			<div class="bottom">
				<ul>
					<li class="display">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>
		</div>
		<div class="box" id="two">
			<div class="top">
				<span class="span">11</span>
				<span>22</span>
				<span>33</span>
				<span>44</span>
			</div>
			<div class="bottom">
				<ul>
					<li class="display">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>
		</div>
		<div class="box" id="three">
			<div class="top">
				<span class="span">11</span>
				<span>22</span>
				<span>33</span>
				<span>44</span>
			</div>
			<div class="bottom">
				<ul>
					<li class="display">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>
		</div>
	</body>
</html>

qq_37137999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 实现tab切换保持数据状态
10-15
主要介绍了vue 实现tab切换保持数据状态，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
HTML 排他思想
最新发布
2301_77427226的博客
08-28 102
4使用双重for循环遍历圆点下标，保存自己，清除其他。2.给无序列表添加样式。3.获取所有圆点的下标。
tab栏切换（排他思想）
abcccc1111901的博客
02-19 206
tab栏切换（排他思想）
排他思想（算法）
m0_59735348的博客
04-28 274
<html> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </html> <script> // 获取所有按钮元素 var bt.
tab栏制作：排他思想
qq_42931285的博客
04-16 361
tab栏制作，排他思想
排他思想（点击它时，只有它一个做效果）
DF_jie的博客
11-20 429
排他思想：排除其他元素，给自己添加效果（独享一份）； 例如： 先设置几个按钮，在写出JavaScript 显示效果； 实现效果：点击任何一个按钮，只有当前按钮显示效果（如：添加背景颜色） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
最简单的tab切换实例代码
09-02
下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery左侧点击tab切换代码
06-24
jQuery左侧点击tab切换代码是一款左侧菜单选项卡点击tab切换效果代码。
vue刷新和tab切换实例
08-28
下面小编就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
16-tab切换.html
02-15
16-tab切换.html
JS---排他思想及Tab栏的切换
热门推荐
F__Rong的博客
07-30 1万+
JS的排他思想及tab栏切换,利用数组，循环，自定义属性，通过标签名字选择等
排他算法---应用于轮播图小圆点
weixin_33966095的博客
08-27 143
//===============排他算法（应用轮播图小圆点）=========== var opp = document.getElementById("box1").getElementsByTagName("p"); //for循环为每个小圆点添加监听 for(var i=0;i<=opp.length;i++){ ...
排他原理——点击按钮对应的div呈现出来
pleasureOnFinger的博客
11-14 1893
第一个第二个第三个 第四个 第一个 第二个 第三个 第四个
排他思想 实现轮播图下面小点的变化
weixin_45658984的博客
02-01 463
排他思想:先排除其他人,在设置自己的样式. 成品图
什么是排他思想算法？（源码解析）
...
08-31 455
排他思想算法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
前端小白学习之排他思想
qq_60391201的博客
08-29 468
前端小白的学习日常~
排他思想（例多按钮点击只留当前按钮样式）
weixin_52065872的博客
04-28 195
案例说明 排他思想：如果同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想 案例分析 1.所有元素全部清除样式（干掉其他人） 2.给当前元素设置样式 3.注意顺序不能拉U乱，先干掉他人，在设置自己 案例实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
JavaScript各类轮播图（一）
kuke_kuke的博客
08-16 1049
第一种常规轮播图（如淘宝、京东广告等） ul>li>img样式
利用jquery做tab栏切换
06-01
好的，下面是一个简单的利用 jQuery 实现 tab 栏切换的代码示例： HTML 代码： ```html <ul class="tab-nav"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li>...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值