<div class="codetitle"> <span><a style="CURSOR: pointer" data="68761" class="copybut" id="copybut68761" onclick="doCopy('code68761')"><u>复制代</u></a></span> 代码如下:</div> <div class="codebody" id="code68761"> <br><title>导航——点击弹出内容</title> <br> <style type="text/css"><br>.navgation{margin:0;padding:0;list-style-type:none;position:relative;}<br>.navgation li {float :left;}<br>.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}<br>.navgation a:hover {背景色:白;色:青;テキスト装飾:下線;}<br>.navgation div{display:none;position:absolute;top:30px;}<br></style><br> < script src="Jquery1.7.js" type="text/javascript"></script><br> <script type="text/javascript"><br> $(document).ready(function () {<br> $(".navgation input").each(function () {<br> var this_div = $(".navgation div");<br> var _inx = $(".navgation input") .index(this); <br> $(this).click(<br>function(){this_div.eq(_inx).slidetoggle();}、<br>function(){this_div.eq(_ inx)。 slideToggle(); }<br> );<br> });<br> });<br> </script><br></head><br><body><br> & lt; form id="form1" runat="server"><br> <div><br> <ul class="navgation"><br> <li><input type="button" id= "button" value="链接1"/><br> <div>这里放下拉内容1</div><br> </li><br> <li><input type="button " id="button1" value="链接2"/><br> <div>这里放下拉内容2</div><br> </li><br> <li><入力タイプ="button" id="button2" value="链接3"/><br> <div>这里放下拉内容3</div><br> </li><br> <li>< ;input type="button" id="button3" value="链接4"/><br> <div>这里放下拉内容4</div><br> </li><br> < li><input type="button" id="button4" value="链接5"/><br> <div>这里放下拉内容5</div><br> </li><br> </ul><br> </div><br> </form><br> </body><br> </div>