首頁 > 開發者 > JavaScript
<title>導航——點擊彈出內容</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 _inx = $(".navgation input").index(this); $(this).click( function () { this_div.eq(_inx).slideToggle(); }, function () { this_div.eq(_inx).slideToggle(); } ); }); }); </script></head><body> <form id="form1" runat="server"> <div> <ul class="navgation"> <li><input type="button" id="button" value="連結1"/> <div>這裡放下拉內容1</div> </li> <li><input type="button" id="button1" value="連結2"/> <div>這裡放下拉內容2</div> </li> <li><input type="button" id="button2" value="連結3"/> <div>這裡放下拉內容3</div> </li> <li><input type="button" id="button3" value="連結4"/> <div>這裡放下拉內容4</div> </li> <li><input type="button" id="button4" value="連結5"/> <div>這裡放下拉內容5</div> </li> </ul> </div> </form></body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
