Tip: you can modify some code before running
<!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=gb2312" /> <title></title> <script type="text/javascript">Function nTabs (thisObj, Num) {if (thisObj. className = "active") return; var tabObj = thisObj. parentNode. id; var tabList = document. getElementById (tabObj ). getElementsByTagName ("li"); for (I = 0; I<tabList.length; i++) { if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } var show_king_id = 1; function show_king_list(e,k) { if(show_king_id == k) return true; o = document.getElementById("a"+show_king_id); o.className = "bg"; e.className = " "; show_king_id = k; } var show_kinga_id = 1; function show_kinga_list(f,l) { if(show_kinga_id == l) return true; o = document.getElementById("b"+show_kinga_id); o.className = "bg"; f.className = " "; show_kinga_id = l; } </script> <style type="text/css">* {Margin: 0; padding: 0;} body {font-size: 12px; font-family: "", Arial, Helvetica, sans-serif; color: #666666 ;}. door_container {width: 200px ;}. door_container. tabTitle {height: 36px ;}. door_container. tabTitle li {list-style: none; float: left; width: 77px; height: 36px; cursor: pointer; padding-left: 2px; line-height: 28px; color: # 7c7c7c; font-size: 14px; text-align: center; font-weight: bold ;}. door_container. tabTitle. active {color: #000; background: # CC9999 ;}. door_container. tabTitle. normal {color: # 7c7c7c ;}. door_container. tabContent {width: 198px ;}. none {display: none ;}. star {width: 198px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis ;}. star dl {width: 198px; margin: 5px 0; float: left ;}. star dl dd {float: left; margin-left: 8px; line-height: 18px ;}. star dl dt {float: left ;}. bg {width: 198px; margin: 5px 0; background: # CCC; float: left ;}. sl01 {background: # CCCCCC; margin: 15px 5px 0 0; width: 25px; height: 18px; padding-top: 7px; text-align: center; font-weight: bold; color: # FF0000 ;}. sl02 img {border: 1px solid #999999; padding: 3px ;}. sl03 a {color: # 0066CC; text-decoration: underline ;}. sl03 a: hover {color: # FF3300; text-decoration: none ;}. sl04 {background: # CCCCCC ;}. sl05 {}. bg. server load balancer 01 {background: #996600; margin: 5px 5px 0 0; width: 25px; height: 18px; padding-top: 7px; text-align: center; font-weight: bold; color: # FF0000 ;}. bg. sl02 img {display: none ;}. bg. sl03 {width: 140px ;}. bg. sl04 {background: # CCCCCC; width: 140px ;}. bg. sl05 {display: none ;}</style> </head> <body> <div class="door_container"> <div class="TabTitle"> <ul id="myTab"> <li class="active" onmouseover=nTabs(this,0);>Celebrity netizens</li> <li class="normal" onmouseover=nTabs(this,1);>Excellent circle master</li> </ul> </div> <div class="TabContent"> <div id=myTab_Content0> <div class="star"> <dl id=a1 onmouseover=show_king_list(this,1);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a2 onmouseover=show_king_list(this,2);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a3 onmouseover=show_king_list(this,3);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a4 onmouseover=show_king_list(this,4);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a5 onmouseover=show_king_list(this,5);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a6 onmouseover=show_king_list(this,6);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a7 onmouseover=show_king_list(this,7);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a8 onmouseover=show_king_list(this,8);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a9 onmouseover=show_king_list(this,9);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=a10 onmouseover=show_king_list(this,10);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> </div> </div> <div class="none" id=myTab_Content1> <div class="star"> <dl id=b1 onmouseover=show_kinga_list(this,1);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b2 onmouseover=show_kinga_list(this,2);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b3 onmouseover=show_kinga_list(this,3);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b4 onmouseover=show_kinga_list(this,4);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b5 onmouseover=show_kinga_list(this,5);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b6 onmouseover=show_kinga_list(this,6);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b7 onmouseover=show_kinga_list(this,7);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b8 onmouseover=show_kinga_list(this,8);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b9 onmouseover=show_kinga_list(this,9);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> <dl class="bg" id=b10 onmouseover=show_kinga_list(this,10);> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">Water sample years</dd> <dd class="sl04">25-year-old in Wuhan, Hubei province</dd> <dd class="sl05">Popularity: 1243178</dd> </dl> </div> </div> </div> </div> </body> </html>
Tip: you can modify some code before running