Navigation bar Div + CSS + JS on the home page of a similar passenger Collection [Code instance]

Author rat
An effect of the customer collection homepage. Someone asked me how to write it today, so I wrote another one at night. By the way, I took another look at the layout;
You can take a look at the effect of the customer collection home: http://shanghai.kijiji.cn
I tried not to use the position: absolute method, but it was too difficult to write it. Later I used the position: absolute method, but it was useless on the client collection site; I really don't know how it was written at the time;
The following are:

The layout section is as follows: CopyCode The Code is as follows: <Div id = "info">
<Div id = "kjj_tag"> </div>
<Ul>
<Li id = "tag1"> <H4> <a href = "javascript: kijijitag ('1 '); "> popular events </a> </H4> </LI>
<Li id = "tag2"> <H4> <a href = "javascript: kijijitag ('2 '); "> latest functions </a> </H4> </LI>
<Li id = "tag3"> <H4> <a href = "javascript: kijijitag ('3 '); "> service commitment </a> </H4> </LI>
<Li id = "tag4"> <H4> <a href = "javascript: kijijitag ('4 '); "> latest success stories </a> </H4> </LI>
<Li id = "tag5"> <H4> <a href = "javascript: kijijitag ('5 '); "> Hot recommendations </a> </H4> </LI>
</Ul>
<Div id = "info1"> <a href = "http://www.zishu.cn" target = "blank"> rat 00001 </a> </div>
<Div id = "info2"> <a href = "http://www.zishu.cn" target = "blank"> rat 00002 </a> </div>
<Div id = "info3"> <a href = "http://www.zishu.cn" target = "blank"> rat 00003 </a> </div>
<Div id = "info4"> <a href = "http://www.zishu.cn" target = "blank"> rat 00004 </a> </div>
<Div id = "info5"> <a href = "http://www.zishu.cn" target = "blank"> rat 00005 </a> </div>
</Div>

CSS is not optimized; Copy code The Code is as follows: <style>
/* Zishu.cn */
* {Margin: 0; padding: 0; font-size: 12px; font-family: verdana, Arial, ""; List-style: none ;}
Body {Background: # ffffcc; margin: 100px 0 0 100px ;}
# Info {border: 1px solid # ffcc66; padding: 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 is the JS part: javascript is too difficult for me; so it may be a bad write, but the effect is coming out; Copy code The Code is 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>

The following are the four diagrams used:

Check the effect!Xmlns = "http://www.w3.org/1999/xhtml">

• Popular events
• Latest features
• Service Commitment
• Latest success stories
• Hot post recommendation

Sub-rat 00001 kickochi Shanghai Sub-rat 00002 kickochi Beijing Sub-rat 00003 kickochi Hohhot sub-rat 00004 kickochi Hangzhou sub-rat 00005 kickochi total home page

Zombies 2007.04.25. Early morning