Author Mouse
Guests gathered home on an effect, today, someone asked me how to write, so the evening was another rewrite; By the way, put that layout back.
You can take a look at the results of the first home: http://shanghai.kijiji.cn
I tried not to Position:absolute, but it was too difficult to write, and later it was position:absolute, but there was no use in the guest station; I don't know how it was written.
Here is the effect chart:
Here is the Layout section
Copy Code code as follows:
<div id= "Info" >
<div id= "Kjj_tag" > </div>
<ul>
<li id= "Tag1" ><li id= "Tag2" ><li id= "Tag3" ><li id= "Tag4" ><li id= "Tag5" ></ul>
<div id= "Info1" ><a href= "http://www.zishu.cn" target= "blank" > Mouse 00001</a></div>
<div id= "Info2" ><a href= "http://www.zishu.cn" target= "blank" > Mouse 00002</a></div>
<div id= "Info3" ><a href= "http://www.zishu.cn" target= "blank" > Mouse 00003</a></div>
<div id= "Info4" ><a href= "http://www.zishu.cn" target= "blank" > Mouse 00004</a></div>
<div id= "Info5" ><a href= "http://www.zishu.cn" target= "blank" > Mouse 00005</a></div>
</div>
The following is the CSS section: CSS is still not optimized;
Copy Code code as follows:
<style>
/* Child Mouse www.zishu.cn*/
* {Margin:0;padding:0;font-size:12px;font-family:verdana, Arial, "Song-Body"; list-style:none;}
Body {background: #FFFFCC; margin:100px 0 0 100px;}
#info {border:1px solid #FFCC66;p adding:30px;background: #f7f7f7; width:500px;}
#kjj_tag {width:500px;border-bottom:1px solid #CCC; Background:url (taga_c.gif) repeat-x left bottom;height:30px;}
#info1, #info2, #info3, #info4, #info5 {border:1px solid #ccc; border-top:none; padding:10px; background: #fff; clear:both ; }
h4{font-weight:normal;float:left;border-right:1px solid #fff;}
. HD {display:none;}
. SW {Display:block;}
#info li {float:left;}
#info Li A{float:left display:block; padding:4px 10px 4px 10px; color: #37572E; Text-decoration:none}
#info li a:hover{background: #E9FE70; color: #000}
#info ul {float:left; margin-top:-28px; padding:5px 0; Position:absolute}
#info. Ha a{color: #FFF}
#info. Ha a:hover{color: #FFF; Background:none}
#info. Ha. Hc:hover{background:url (tag_d.gif) no-repeat Center bottom;
. ha {Background:url (taga_a.gif) no-repeat left top;margin-top:-3px;padding-top:3px;}
. hb{Background:url (taga_b.gif) no-repeat right top; margin-top:-3px; padding-top:3px;}
. HC {Background:url (tag_d.gif) no-repeat Center bottom; height:17px; Color: #FFF; Font-weight:bold}
</style>
The following JS section: Because JavaScript is too difficult for me, so maybe this part of the writing is bad, but the effect is out;
Copy Code code as follows:
<script language= "JavaScript" >
var k = Math.floor (Math.random () *5+1);
For (I=1 i <6; i++) {
if (i==k) {
document.getElementById ("info" +i). Classname= "SW";
document.getElementById ("tag" +i). Classname= "Ha";
document.getElementById ("tag" +i). getElementsByTagName ("H4") [0].classname= "HB";
document.getElementById ("tag" +i). getElementsByTagName ("a") [0].classname= "HC";
}
else{
document.getElementById ("info" +i). Classname= "HD";
}
}
function Kijijitag (tag) {
For (I=1 i <6; i++)
{
if (I==tag)
{
document.getElementById ("info" +i). Classname= "SW";
document.getElementById ("tag" +i). Classname= "Ha";
document.getElementById ("tag" +i). getElementsByTagName ("H4") [0].classname= "HB";
document.getElementById ("tag" +i). getElementsByTagName ("a") [0].classname= "HC";
}
else{
document.getElementById ("info" +i). Classname= "HD";
document.getElementById ("tag" +i). Classname= "";
document.getElementById ("tag" +i). getElementsByTagName ("H4") [0].classname= "];
document.getElementById ("tag" +i). getElementsByTagName ("a") [0].classname= "];
}
}
}
</script>
Here are the four diagrams used:
Look at the effect!
<! 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=utf-8 "/> <title> passenger navigation bar Test </title> <style>/* Mouse www.zishu.cn*/* {Margin:0;padding:0;font -size:12px;font-family:verdana, Arial, "Song Body"; List-style:none;} Body {background: #FFFFCC; margin:100px 0 0 100px;} #info {border:1px solid #FFCC66;p adding:30px;background: #f7f7f7; width:500px;} #kjj_tag {width:500px;border-bottom:1px solid #CCC; Background:url (http://www.zishu.cn/attachments/month_0704/ O200742501718.gif) repeat-x left bottom;height:30px;} #info1, #info2, #info3, #info4, #info5 {border:1px solid #ccc; border-top:none; padding:10px; background: #fff; clear:both ; h4{font-weight:normal;float:left;border-right:1px solid #fff;} . HD {display:none;} . SW {Display:block;} #info li {float:left;} #info Li A{floaT:left; Display:block; padding:4px 10px 4px 10px; Color: #37572E; Text-decoration:none} #info li a:hover{background: #E9FE70; color: #000} #info ul {float:left; margin-top:-28px; padding : 5px 0; Position:absolute} #info. Ha a{color: #FFF} #info. Ha a:hover{color: #FFF; Background:none} #info. ha. Hc:hover{backgro Und:url (http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat Center bottom; }. Ha {Background:url (http://www.zishu.cn/attachments/month_0704/a20074250170.gif) No-repeat left top;margin-top:- 3px;padding-top:3px;} . hb{Background:url (http://www.zishu.cn/attachments/month_0704/x200742501712.gif) no-repeat right top; margin-top:- 3px; padding-top:3px;} . HC {Background:url (http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat Center bottom; height:17px; Color: #FFF; Font-weight:bold} </style> </pead> <body> <div id= "info" > <div id= "Kjj_tag" > </div > <ul> <li id= "Tag1" ><p> HotEvents </p></li> <li id= "Tag2" ><p> latest features </p></li> <li id= "Tag3" ><p> Service Commitment </p></li> <li id= "Tag4" ><p> latest success stories </p></li> <li id= "Tag5" ><p > Hot Paste Recommendation </p></li> </ul> <div id= "Info1" > Mouse 00001 guests gather in Shanghai </div> <div id= "Info2" > Mice 00002 guests gather in Beijing </div> <div id= "Info3" > Mouse 00003 Guests gather Hohhot </div> <div id= "Info4" > Mouse 00004 guests gather in Hangzhou </ div> <div id= "Info5" > Mouse 00005 Total home </div> </div> <script language= "JavaScript" > var k = Math.floor (Math.random () *5+1); For (I=1 i <6; i++) {if (i==k) {document.getElementById ("info" +i). Classname= "SW"; document.getElementById ("tag" +i). Classname= "Ha"; document.getElementById ("tag" +i). getElementsByTagName ("H4") [0].classname= "HB"; document.getElementById ("tag" +i). getElementsByTagName ("a") [0].classname= "HC"; } else{document.getElementById ("info" +i). Classname= "HD"; } function Kijijitag (tag) {for (I=1 I <6; i++) {if (I==tag) {document.getElementById ("info" +i). C Lassname= "SW"; document.getElementById ("tag" +i). Classname= "Ha"; document.getElementById ("tag" +i). getElementsByTagName ("H4") [0].classname= "HB"; document.getElementById ("tag" +i). getElementsByTagName ("a") [0].classname= "HC"; } else{document.getElementById ("info" +i). Classname= "HD"; document.getElementById ("tag" +i). Classname= ""; document.getElementById ("tag" +i). getElementsByTagName ("H4") [0].classname= "]; document.getElementById ("tag" +i). getElementsByTagName ("a") [0].classname= "]; }} </script> child mouse 2007.04.25. Wee </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Special Note:
1, CSS part is not very clear, because I write a little dizzy;
2, five tags are randomly exchanged;
3, JS part can be further streamlined, but to have CSS support;
