设置导航栏,文字为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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 虚幻5 UE美术毛发渲染
- ¥15 CVRP 图论 物流运输优化
- ¥15 Tableau online 嵌入ppt失败
- ¥100 支付宝网页转账系统不识别账号
- ¥15 基于单片机的靶位控制系统
- ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度
- ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测