原生js写的tab切换，导航栏切换

使用原生js写的tab栏切换的原理
1.使用排他思想
2.设置自定义属性

		<style> 
	
		    ol>li { 
	
		        width: 100px; 
	
		        height: 50px; 
	
		        background-color: pink; 
	
		        float: left; 
	
		        margin: 10px; 
	
		    } 
	
		    ul>li { 
	
		        width: 200px; 
	
		        display: block; 
	
		        display: none; 
	
		    } 
	
		</style> 
	
		<body> 
	
		    <ol> 
	
		        <li style="background-color: red;">tab栏1</li> 
	
		        <li>tab栏2</li> 
	
		        <li>tab栏3</li> 
	
		    </ol> 
	
		    <ul> 
	
		        <li style="display: block;">我是tab栏1的内容</li> 
	
		        <li>我是tab栏2的内容</li> 
	
		        <li>我是tab栏3的内容</li> 
	
		    </ul> 
	
		    <script> 
	
		        // 获取元素 
	
		        var ols = document.querySelectorAll('ol>li'); 
	
		        var uls = document.querySelectorAll('ul>li'); 
	
		        // 循环 ols元素 绑定点击事件 
	
		        for (var i = 0; i < ols.length; i++) { 
	
		            ols[i].setAttribute('index', i); //点击自定义属性 
	
		            ols[i].addEventListener('click', function() { //点击点击事件 
	
		                // 使用排他思想 清楚所有 ols 上面的 背景颜色 
	
		                for (var x = 0; x < ols.length; x++) { 
	
		                    ols[x].style.backgroundColor = ''; 
	
		                } 
	
		                //排他 后面 给自己单独添加红色 
	
		                this.style.backgroundColor = 'red'; 
	
		                // 使用排他思想给 所有 uls  都影藏起来了 
	
		                for (var i = 0; i < uls.length; i++) { 
	
		                    uls[i].style.display = 'none'; 
	
		                } 
	
		                //使用获取 ols 上面的自定义属性  作为 uls的下标 显示对应的元素 
	
		                var num = this.getAttribute('index'); 
	
		                uls[num].style.display = 'block'; 
	
		            }); 
	
		        } 
	
		    </script> 
	
		</body>