设置导航栏,文字为a,b
点击a显示1,2
点击b显示3,4
1条回答 默认 最新
- 你好!机器人 2021-11-30 17:05关注
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } li { list-style: none; } #nav { margin: 50px; position: relative; } #nav li.current a { color: #f60; } #nav li { float: left; padding: 0 20px; height: 25px; position: relative; } #nav li a { font: 14px/25px '宋体'; font-weight: bold; color: #000; text-decoration: none; } #nav li ul { display: none; position: absolute; left: 0; top: 25px; border: 1px solid #ccc; text-align: center; background: #f00; } </style> </head> <body> <script type="text/javascript"> $(function() { $('#nav > li').click(function() { //hover是鼠标悬浮,click是鼠标点击。 $(this).addClass('current').siblings('li').removeClass('current'); $('#nav > li > ul').hide(); $(this).find('ul').show(); }) }) </script> <ul id="nav"> <li> <a href="#">a</a> <ul> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> </ul> </li> <li> <a href="#">b</a> <ul> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> </ul> </li> </ul> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥30 这是哪个作者做的宝宝起名网站
- ¥60 版本过低apk如何修改可以兼容新的安卓系统
- ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
- ¥50 有数据,怎么建立模型求影响全要素生产率的因素
- ¥50 有数据,怎么用matlab求全要素生产率
- ¥15 TI的insta-spin例程
- ¥15 完成下列问题完成下列问题
- ¥15 C#算法问题, 不知道怎么处理这个数据的转换
- ¥15 YoloV5 第三方库的版本对照问题
- ¥15 请完成下列相关问题!