开发中需要实现标题中的功能,查看资料并实现如下:
1、实现页内跳转:
这个简单,只需要添加锚点即可,给需要跳转的元素添加id属性,在点击的a元素中href=“id”即可。
2、实现导航栏的样式:
代码如下:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").each(function(index){ $("li").eq(index).click(function(){ $("li").removeClass("active"); $(this).addClass("active"); }); }); }); </script> <style type="text/css"> .active{ font-size:1.5em; } </style> </head> <body> <ul> <li><a href="#">Coffee</a></li> <li><a href="#">Milk</a></li> <li><a href="#">Soda</a></li> </ul> </body> </html>
注意:
1、必须先引用jQuery;
2、需要添加的类必须先存在。