前端中实现页内跳转和导航栏点击实现样式，点击其他消除样式并为这一项添加样式

开发中需要实现标题中的功能，查看资料并实现如下：

  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、需要添加的类必须先存在。

posted @ 2015-12-14 10:12  garygao12580  阅读(3391)  评论(0)    收藏  举报