Effect Chart:
Demo Code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>js+css completed the website's member photo information display effect </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: "Song Body", 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. sl01{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> </pead> <body> <div class= "Door_container" > <div class= "tabtitLe "> <ul id=" mytab "> <li class=" active "Onmouseover=ntabs (this,0);> star Netizen </li> <li class=" Normal "Onmouseover=ntabs (this,1);> Excellent circle main </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 "> Watery years </dd> <dd class=" SL04 " >25 years old • Hubei Wuhan </dd> <dd class= "sl05" > Popular: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 time </dd> <dd class=" sl04 ">25 age • Hubei Wuhan </dd> <dd class=" sl05 "> Popular: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" > </dd> <dd class= "sl04" >25 years, Hubei Wuhan </dd> <dd class= "sl05" > Popular:1243178</dd> </dl& Gt <DL class= "BG" id=a4 onmouseover=show_king_list (this,4);> <dt "class=" >01</dt> sl01 <dt " Sl02 "></dt> <dd class=" sl03 "> Watery years </dd> <dd class=" sl04 ">25 old • Hubei Wuhan </dd> <dd class= "Sl05" > Popular: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" > Watery years </dd> <DD class = "SL04" >25 years old • Hubei Wuhan </dd> <dd class= "sl05" > Popular:1243178</dd> </dl> <dl class= "BG" Id=a6 Onmou Seover=show_king_list (this,6);> <dt class= "sl01" >01</dt> <dt class= "sl02" ></dt> <dd class= "SL03" > Water time </dd> <dd class= "sl04" >25 age • Hubei Wuhan </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 time </dd> <dd class= "sl04" >25 age • Hubei Wuhan </dd> <dd class= "sl05" > Popularity: 1243178</ dd> </dl> <dl class= "BG" id=a8 onmouseover=show_king_list (this,8);> <dt class= "Sl01" >01</dt& Gt <dt class= "sl02" ></dt> <dd class= "sl03" > Watery years </dd> <dd class= "sl04" >25 old • Hubei Wuhan </dd > <dd class= "sl05" > Popular: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" > Watery years </dd& Gt <dd class= "sl04" >25 age • Hubei Wuhan </dd> <dd class= "sl05" > Popular: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" > Watery years </dd> <dd class= "sl04" >25 age • Hubei Wuhan </dd> <dd class= "sl05" > Popular: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" > Watery years </dd> <dd class= "sl04" >25 age • Hubei Wuhan </dd> <dd class= "sl05" > Popular:1243178</dd> </dl> < DL class= "BG" id=b2 onmouseover=show_kinga_list (this,2);> <dt "class=" >01</dt> sl01 <dt "class=" ></dt> <dd class= "sl03" > Water time </dd> <dd class= "sl04" >25 years • Hubei Wuhan </dd> <dd class= "sl05 "> Popular: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" > Watery years </dd> <dd class= "sl04 ">25-year-old Hubei Wuhan </dd> <dd class="Sl05" > Popular: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" > Watery years </dd> <DD class = "SL04" >25 years old • Hubei Wuhan </dd> <dd class= "sl05" > Popular:1243178</dd> </dl> <dl class= "BG" Id=b5 Onmou Seover=show_kinga_list (this,5);> <dt class= "sl01" >01</dt> <dt class= "sl02" ></dt> <dd class= "SL03" > Water time </dd> <dd class= "sl04" >25 age • Hubei Wuhan </dd> <dd class= "sl05" > Popularity: 1243178</ dd> </dl> <dl class= "BG" Id=b6 onmouseover=show_kinga_list (this,6);> <dt class= "Sl01" >01</dt& Gt <dt class= "sl02" ></dt> <dd class= "sl03" > Watery years </dd> <dd class= "sl04" >25 old • Hubei Wuhan </dd > <dd class= "sl05" > Popular: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" > Watery years </dd> <dd class= "sl04" >25 old • Hubei Wuhan </dd > <dd class= "sl05" > Popular: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" > Watery years < /dd> <dd class= "sl04" >25 age • Hubei Wuhan </dd> <dd class= "sl05" > Popular:1243178</dd> </dl> <DL cl ass= "BG" id=b9 onmouseover=show_kinga_list (this,9);> <dt "class=" >01</dt> sl01 <dt "class=" > </dt> <dd class= "sl03" > Water time </dd> <dd class= "sl04" >25 years • Hubei Wuhan </dd> <dd class= "Sl05" > Popular: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" > Watery years </dd> <dd class= " SL04 ">25-year-old Hubei Wuhan </dd> <dd class=" SL05 ">Popular:1243178</dd> </dl> </div> </div> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
