Tip: you can modify some code before running
Reusable tab switch javascript code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tab</title><style type="text/css">Body {text-align: center ;}. tab1 ,. tab2 {width: 350px; margin: 0 5px; background: # CC9933; opacity: 0.5; border-radius: 5px 5px 5px 5px; box-shadow: # CCC 4px 4px 4px; text-align: left; float: left; display: inline ;}. name {list-style: none; overflow: hidden ;}. name li {width: 90px; font: bold 16px/30px Verdana, Geneva, sans-serif; background: #669900; text-align: center; border-radius: 5px 5px 5px; margin-right: 5px; float: left; display: inline; cursor: pointer;} li. selected {background: # FF9900 ;}. content li {height: 500px; display: none ;}</style></head><body><div class="tab1"> <ul class="name"> <li>Project 1</li> <li>Project 2</li> <li>Project 3</li> </ul> <ul class="content"> <li>Class is<em>"Tab1"</em>Project 1<em>"Click"</em>Trigger</li> <li>Class is<em>"Tab1"</em>Project 2: Pass<em>"Click"</em>Trigger</li> <li>Class is<em>"Tab1"</em>Project 3:<em>"Click"</em>Trigger</li> </ul></div><div class="tab1"> <ul class="name"> <li>Project 1</li> <li>Project 2</li> <li>Project 3</li> </ul> <ul class="content"> <li>Class is<em>"Tab1"</em>Project 1<em>"Click"</em>Trigger</li> <li>Class is<em>"Tab1"</em>Project 2: Pass<em>"Click"</em>Trigger</li> <li>Class is<em>"Tab1"</em>Project 3:<em>"Click"</em>Trigger</li> </ul></div><div class="tab2"> <ul class="name"> <li>Project 1</li> <li>Project 2</li> <li>Project 3</li> </ul> <ul class="content"> <li>Class is<em>"Tab2"</em>Project 1<em>"Mouseover"</em>Trigger</li> <li>Class is<em>"Tab2"</em>Project 2: Pass<em>"Mouseover"</em>Trigger</li> <li>Class is<em>"Tab2"</em>"Project 3: Pass<em>"Mouseover"</em>Trigger</li> </ul></div><script type="text/javascript">/*** Common event Processing function */var EventUtil = {getEvent: function (event) {return event? Event: window. event;}, getTarget: function (event) {return event.tar get | event. srcElement;}, addHandler: function (element, type, handler) {if (element. addEventListener) {element. addEventListener (type, handler, false);} else if (element. attachEvent) {element. attachEvent ("on" + type, handler);} else {element ["on" + type] = handler ;}}}; // Set the tab switch mode: tabSwitch ("tab1", "click"); tabSwitch ("tab2", "mouseover "); /*** tab common function * // Set the inClassName parameter to the bound option card class name. The triggerType parameter is set to the function tabSwitch (inClassName, triggerType) that triggers the switch) {// Obtain all tab areas if (document. querySelectorAll) {var tabs = document. querySelectorAll (". "+ inClassName);} else {var divs = document. getElementsByTagName ("div"); var tabs = new Array (); for (var k = 0, lenDiv = divs. length; k<lenDiv; k++){if(divs[k].className.indexOf(inClassName) >-1) {tabs. push (divs [k]) ;}}// create a switchover function for each tab (var j = 0, len = tabs. length; j<len; j++){//获取标题和内容列表var tab = tabs[j];//使用私有作用域为每个选项卡建立切换(function(){var nameUl = tab.getElementsByTagName("ul")[0];var content = tab.getElementsByTagName("ul")[1];//初始化选项卡nameUl.getElementsByTagName("li")[0].className = "selected";content.getElementsByTagName("li")[0].style.display = "block";//添加事件委托EventUtil.addHandler(nameUl,triggerType,function(event){//获取事件对象event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);//选项卡切换if(target.nodeName.toLowerCase() == "li"){//分别取得标题列表项和内容列表项var nameList = nameUl.getElementsByTagName("li");var contentList = content.getElementsByTagName("li");//标题添加selected类，并显示内容for(var i=0,len=nameList.length; i<len; i++){nameList[i].className = "";contentList[i].style.display = "none";if(nameList[i] == target){nameList[i].className = "selected";contentList[i].style.display = "block";}}}});})();}}</script></body></html>
Tip: you can modify some code before running
