<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 {background-color:white;color:blue;text-decoration:underline;}<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><br><br> <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> <input type="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><br> </div>
