js tab栏切换

tab栏切换

【案例分析】：

1. 单击tab栏，切换内容，只能看见该栏的内容，因此其他的内容的display设置为none
   此处注意以下：在js中修改元素的属性的时候是改为行内属性，行内属性优先级大于在style的
2. 运用排它思想，先将所有元素清除样式，再给当前元素设置样式

HTML

<div class="tabBox">
			<ul id="tab">
			    <li class="onclickStyle">tab1</li>
			    <li>tab2</li>
			    <li>tab3</li>
			</ul>
			<div id="tab_con">
	    		<div >aaaa</div>
	   	 		<div style="display:none">bbbb</div>
	    		<div style="display:none">cccc</div>
			</div>
		</div>

CSS

.tabBox{
				margin: 100px;	
				position: relative;
			}
			ul li {
	            float: left;
	            width: 100px;
	            height: 30px;
	            line-height: 30px;
	            text-align: center;
	            background-color: #fff;
	            border: 1px #bbb solid;
	            border-bottom: none;
	            cursor: pointer;
        	}
        	#tab_con{
        		position: absolute;
        		top: 31px;
        	}
        	.onclickStyle{
        		background-color: red;
        		color: #fff;
        	}

JavaScript

var liList = document.querySelectorAll('ul>li');
			var divList = document.querySelectorAll('#tab_con>div');
			for (let i = 0; i < liList.length; i++) {//注意此处不能使用var定义，var定义之后，i是全局变量，使tab栏内容无法出现
				liList[i].onclick = function(){
					for (let i = 0; i < liList.length; i++) {
						liList[i].className = '';
						divList[i].style.display = 'none';
					}
					this.className = 'onclickStyle';
					divList[i].style.display = 'block';

DOM详细基础及多个案例
https://blog.csdn.net/qq_56303170/article/details/119683887