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


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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM