開發中需要實現標題中的功能,查看資料並實現如下:
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、需要添加的類必須先存在。