jquery案例三-导航展示
1.模拟某平台页面效果完成
2.代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style/style.css"> </head> <body> <!-- 头部部分 --> <div class="header"> <div class="nav w"> <div class="nav_left"> <a href=""><img src="http://www.wb.com/NewWanbu/App/Public/Lib/Widget/Head/newhead/logo.png" alt=""></a> </div> <div class="nav_center"> <ul> <li><a href="#">首页</a></li> <li><a href="#" class="head_nav_visited">健康数据</a></li> <li><a href="#">咨询评估</a></li> <li><a href="#">活动竞赛</a></li> <li><a href="#">万步圈</a></li> <li><a href="#">万步商城</a></li> </ul> </div> <div class="nav_right"> <img src="http://www.wb.com/NewWanbu/App/Public/Lib/Widget/Head/newhead/news.png" alt=""> </div> </div> </div> <div class="wrap w"> <div class="text_desc"> <div class="text_desc_left"> <img src="http://www.wb.com/NewWanbu/App/Space/Tpl/Public/images/userImg.png" alt=""> <em>1111的数据图</em> <span>2021-12-03</span> </div> <h4 class="shebei">我的设备</h4> </div> <div class="choose clearfix"> <ul> <li class="choose_active"><a href="#">步行数据</a></li> <li><a href="#">体重</a></li> <li><a href="#">血压</a></li> <li><a href="#">血糖</a></li> <li><a href="#">运动处方</a></li> <li><a href="#">体温</a></li> <li><a href="#">睡眠</a></li> <li><a href="#">膳食</a></li> </ul> </div> <div class="content active">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div class="content">8</div> </div> </body> </html> <script src="./js/jquery.js"></script> <script> $(function(){ $(".choose li").click(function(){ $(this).siblings().removeClass("choose_active"); $(this).addClass("choose_active"); var index = $(this).index(); $(".content").removeClass("active"); $(".content").eq(index).addClass("active"); }); }) </script>
