JavaScript---实现标签栏切换

效果图-------点击左边标签栏实现右边空白处切换

css

#list {
			list-style: none;
		}

		#largebox {
			width: 600px;
			height: 350px;
		}

		#leftbox {
			width: 100px;
			height: 350px;
			background-color: #dbdeed;
			float: left;
		}

		#box1 {
			width: 500px;
			height: 350px;
			background-color: #ebeffc;
			/*float: left;*/
		}

		#box2 {
			width: 500px;
			height: 350px;
			background-color: #ebeffc;
			display: none;
			float: left;
		}

		#box3 {
			width: 500px;
			height: 350px;
			background-color: #ebeffc;
			display: none;
			float: left;
		}

		#box4 {
			width: 500px;
			height: 350px;
			background-color: #ebeffc;
			display: none;
			float: left;
		}

		ul {
			padding: 0px;
		}

		li {
			height: 40px;
			line-height: 40px;
		}

		li:hover {
			background-color: #ebeffc;
		}

		a {
			color: #0153a7;
			text-decoration: none;
		}

js

window.onload = function () {
			//找对象：所有的li即一级菜单项
			var leftbox = document.getElementById("leftbox");
			var menus = leftbox.getElementsByTagName("li"); //下标0-3
			//console.log(menus.length);
			//找对象：所有的div即二级菜单项
			var submenus = document.getElementsByName("tabbox"); //下标0-3

			//给menus集合中的所有li一级菜单绑定mouseover事件处理函数
			for (var i = 0; i < menus.length; i++) {
				menus[i].onmouseover = function () {
					for (var j = 0; j < submenus.length; j++) {
						/*如果当前访问到的二级菜单div的下标对应的那个一级菜单等于当前鼠标移入的一级菜单li（即this表示的当前发生事件的元素）,
						则将该下标对应的二级菜单div设置为显示,其他的二级菜单div设置为隐藏。*/
						if (this == menus[j])
							submenus[j].style.display = "block";
						else
							submenus[j].style.display = "none";
					}

				}

			}

		}

html

		

			

				

					标签1
				
				

					标签2
				
				

					标签3
				
				

					标签4
				
			
		
		

			标签栏1
		
		

			标签栏2
		
		

			标签栏3
		
		

			标签栏4