Tip: you can modify some code before running
<html><head><style>body{text-align:center;}.tab{width:432px;height:208px;margin:0 auto;overflow:hidden;border:1px solid #cccccc;}.menu,.menu li{margin:0;padding:0;height:24px;list-style:none;overflow:hidden;text-align:center;}.menu{border-bottom:1px solid #cccccc;}.menu .default{width:84px;float:left;font-size:10pt;line-height:1.5;margin-left:1px;cursor:pointer;background:url('http://bbs./attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;}.menu .active{width:84px;float:left;font-size:10pt;line-height:1.5;margin-left:1px;cursor:pointer;font-weight:bold;color:#FFFFFF;background:url('http://bbs./attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;}#more{width:76px;float:left;font-size:10pt;line-height:1.5;margin-left:1px;cursor:pointer;background:url('bg.jpg') no-repeat;color:#FF0000;font-weight:normal;text-align:right}.con{width:422px;height:184px;margin:0 auto;}</style><head><body><script>function init(ids,cons,dis){ document.getElementById(ids).getElementsByTagName('li')[0].className='active';document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;//document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果document.getElementById(ids).onclick=function(){var obj;if(navigator.appName.indexOf("Microsoft") > -1){ /////////提前了,加了个浏览器判断obj = window.event.srcElement;}else{obj = arguments[0].target;}onmousOver(ids,cons,dis,obj); /////////加个参数obj}//点击激发效果}function onmousOver(ids,cons,dis,obj){ ///////////加个参数obj////////这两行删了if (obj.tagName=='LI'){if (obj.className=='active'||obj.id=='more')return;var o=document.getElementById(ids).getElementsByTagName('li');for (var i=0;i<=o.length-1;i++){o[i].className='default'}obj.className='active';if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}}}</script><!--#1--><div class='tab'><ul id='nav1' class='menu'><li id="l1" class='default'>First News</li><li id="l2" class='default'>Second News</li><li id="l3" class='default'>Third News</li><li id="l4" class='default'>Fourth News</li><li id="l5" class='default'>Fifth News</li></ul><div class='con' id='con1'></div></div><div ><div id="div1_l1">To create a tab, you can find it in the forum for a long time and it will not have the desired effect.</div><div id="div1_l2">Ask experts for help!</div><div id="div1_l3">I found a few changes, but the menus in the header are too difficult to locate.</div><div id="div1_l4">It changes when you place your mouse over it, instead of clicking it!</div><div id="div1_l5">Added!</div></div><script>init('nav1','con1',"div1_");</script><!--#2--><div class='tab'><ul id='nav2' class='menu'><li id="l1" class='default'>First News</li><li id="l2" class='default'>Second News</li><li id="l3" class='default'>Third News</li><li id="l4" class='default'>Fourth News</li><li id="more">More></li></ul><div class='con' id='con2'></div></div><div ><div id="div2_l1">To create a tab, you can find it in the forum for a long time and it will not have the desired effect.</div><div id="div2_l2">Ask experts for help!</div><div id="div2_l3">I found a few changes, but the menus in the header are too difficult to locate.</div><div id="div2_l4">It changes when you place your mouse over it, instead of clicking it!</div></div><script>init('nav2','con2',"div2_");</script><!--#3--><div class='tab'><ul id='nav3' class='menu'><li id="l1" class='default'>First News</li><li id="l2" class='default'>Second News</li><li id="l3" class='default'>Third News</li><li id="more" >More></li></ul><div class='con' id='con3'></div></div><div ><div id="div3_l1">To create a tab, you can find it in the forum for a long time and it will not have the desired effect.</div><div id="div3_l2">Ask experts for help!</div><div id="div3_l3">I found a few changes, but the menus in the header are too difficult to locate.</div></div><script>init('nav3','con3',"div3_");</script></body></html>
Tip: you can modify some code before running
