日常常用功能-tab切换-原生js和jQuery两种写法，同一思路

最新推荐文章于 2022-09-15 16:57:36 发布

weixin_37460170

最新推荐文章于 2022-09-15 16:57:36 发布

阅读量449

点赞数 1

分类专栏： ‘行万里路’---工作中整理的实例 ‘美人在骨不在皮’---实现原理

本文链接：https://blog.csdn.net/weixin_37460170/article/details/78026402

版权

‘行万里路’---工作中整理的实例同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

‘美人在骨不在皮’---实现原理

6 篇文章 0 订阅

订阅专栏

思路：

1、先设置所以得选项的className为空，内容部分display：none；

2、当点击的时候，选项的className显示active，内容部分display：block；

原生js部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{ margin:0; padding:0;}
.active{ background:red;}
ul{ margin:0; padding:0; padding-bottom:20px;}
li{ float:left; list-style:none;}
#div1 div{ clear:both; width:200px; height:200px; border:1px solid red; display:none;}
</style>

<script>
window.οnlοad=function(){
	
	var oDiv=document.getElementById('div1');
	var aLi=oDiv.getElementsByTagName('li');
	var aCon = oDiv.getElementsByTagName('div');
	
	for(var i=0; i<aLi.length; i++){
		
		aLi[i].index=i;
		
		aLi[i].οnclick=function(){
			
			for(var j=0; j<aLi.length; j++){
				
				aLi[j].className='';
				aCon[j].style.display='none';
				}
			
			this.className='active';
			aCon[this.index].style.display='block';
			};
		}
	};
</script>
</head>

<body>
<div id="div1">
	<ul>
    	<li class="active"><a href="#">选项1</a></li>
        <li><a href="#">选项2</a></li>
        <li><a href="#">选项3</a></li>
    </ul>
    <div style="display:block;">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
</body>
</html>

jQuery部分：

1、引入jQuery的js库

2、代码如下

$(function(){

	$('#div').find('li').click(function(){

	$('#div1').find('li').attr('class','');
	$('$div').find('div').css('display', 'none;');

	$(this).attr('class','active');
	$('#div').find('div').eq($(this).index()).css('display', 'block');
});
});

按照js的思路，jQuery按照js的代码顺序，写法如上，可后期简写。