Copy codeThe Code is as follows:
<Title> navigation-click the pop-up content </title>
<Style type = "text/css">
. Navgation {margin: 0; padding: 0; list-style-type: none; position: relative ;}
. Navgation li {float: left ;}
. Navgation a {padding: 3px 6px; background-color: orange; color: white; text-decoration: none; float: left; height: 24px ;}
. Navgation a: hover {background-color: white; color: blue; text-decoration: underline ;}
. Navgation div {display: none; position: absolute; top: 30px ;}
</Style>
<Script src = "Jquery1.7.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Navgation input"). each (function (){
Var this_div = $ (". navgation div ");
Var _ parameters = $ (". navgation input"). index (this );
$ (This). click (
Function () {this_div.eq (_ signature). slideToggle ();},
Function () {this_div.eq (_ signature). slideToggle ();}
);
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Ul class = "navgation">
<Li> <input type = "button" id = "button" value = "link 1"/>
<Div> put down the pull content 1 </div>
</Li>
<Li> <input type = "button" id = "button1" value = "link 2"/>
<Div> put down the pull content 2 </div>
</Li>
<Li> <input type = "button" id = "button2" value = "link 3"/>
<Div> put down the pull content 3 </div>
</Li>
<Li> <input type = "button" id = "button3" value = "Link 4"/>
<Div> put down the pull content 4 here </div>
</Li>
<Li> <input type = "button" id = "button4" value = "link 5"/>
<Div> put down the pull content 5 </div>
</Li>
</Ul>
</Div>
</Form>
</Body>