前端中實現頁內跳轉和導航欄點擊實現樣式,點擊其他消除樣式並為這一項添加樣式


開發中需要實現標題中的功能,查看資料並實現如下:

  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