js特效tab切换

最新推荐文章于 2022-03-22 22:54:23 发布

酷酷的木南

最新推荐文章于 2022-03-22 22:54:23 发布

阅读量368

点赞数

文章标签： js基础

本文链接：https://blog.csdn.net/lianan999/article/details/88389609

版权

日常工作中我们常用到tab切换
效果：
在这里插入图片描述
首先我们得完成页面布局
html代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.btn-box{margin-bottom: 20px;}
		input{
			padding: 5px 10px;
			border:1px solid #ccc;
			margin-right: 10px;
			border-radius: 4px;
		}
		.box div{
			width: 200px;
			height: 200px;
			border: 1px solid #333;
			display: none;
			
		}
		.active{
			background-color: blue;
			color:#fff;
		}
	</style>
</head>

<body>
	<div>
		<div class="btn-box">
			<input type="button" value="一" data-index='0'>
			<input type="button" value="二"  data-index='1'>
			<input type="button" value="三" data-index='2'>
			<input type="button" value="四" data-index='3'>
		</div>
		<div class="box">
			<div style="display:block" >111</div>
			<div>222</div>
			<div>333</div>
			<div>444</div>
		</div>
	</div>
</body>
</html>

原生js:

		var div1 = document.getElementById('hao');
		var abtn = div1.getElementsByTagName('input');
		var div2 = div1.getElementsByTagName('div');
		for(var i=0;i<abtn.length;i++){
			// 给每个button加上索引是为了通过索引去匹配到对应的盒子展示
			abtn[i].index=i;
			// 循环给每个button加上点击事件
			abtn[i].onclick=function(){
				// 隐藏非对应的元素
				for(var i=0;i<abtn.length;i++){
					abtn[i].className='';
					div2[i].style='display:none;';
				}
				// 通过对应索引找到展示的div展示出来
				div2[this.index].style='display:block;';
				this.className='active';
			}
		}

jq写法

	var div2 = $('.box').find('div');
		$('.btn-box input').click(function(e) {
			$('input').removeClass('active');
			div2.hide();
			// 通过创建的自定义属性data-index来区分展示类容，自定义创建属性一定要从0开始，因为索引是从0开始计算
			// div2.eq($(this).data('index')).show();
			// 也可以直接直接获取下标
			div2.eq($(".btn-box input").index(this)).show()
			/*
			*获取索引的几种方式
			*$(this).index()//不传递参数，返回这个元素在同辈中的索引位置。 
			*$(this).index('input')
			*/
			$(this).addClass('active');
		})

总结：其实就是通过索引比对展示出对应的内容

酷酷的木南

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js特效tab切换

日常工作中我们常用到tab切换效果：首先我们得完成页面布局html代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt
复制链接

扫一扫