亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JavaScript-在滾動時更改導航樣式

JavaScript-在滾動時更改導航樣式

梵蒂岡之花 2022-12-22 15:05:59
我希望在滾動頁面時突出顯示活動部分。但我收到錯誤消息:“未捕獲的 DOMException:無法在‘文檔’上執行‘querySelector’:提供的選擇器為空。”為什么?如何解決這個問題?js:window.addEventListener('scroll', event=>{    let navigationLinks = document.querySelectorAll('nav ul li a');    let fromTop = window.scrollY;    navigationLinks.forEach(link=>{        let section = document.querySelector(link.hash);        if (section.offsetTop <=fromTop &&            section.offsetTop + section.offsetHeight > fromTop        ){            link.classList.add('active');        } else{link.classList.remove('active');}    })});HTML:<nav>      <ul class="nav-links">                <li><a class="active" href="#">Home</a></li>                <li><a href="#about">About</a></li>                <li><a href="#contact">Contact</a></li>       </ul></nav><section>   <div id="about"></div>   <div id="contact"></div></section>CSS:nav a.active{    color: darkcyan;    border-bottom: 2px solid darkgoldenrod;}
查看完整描述

1 回答

?
德瑪西亞99

TA貢獻1770條經驗 獲得超3個贊

您給出的錯誤是由第一個鏈接引起的。


href 是#這樣的link.hash屬性""


兩者都document.querySelector("")引發document.querySelector("#")錯誤。解決方案是在散列不為空時添加檢查。


if (link.hash != "" && link.hash != "#") {

請注意,Home鏈接將始終保持活動狀態,因為它沒有相應的<div id="home">元素


window.addEventListener('scroll', event => {

  let navigationLinks = document.querySelectorAll('nav ul li a');

  let fromTop = window.scrollY;


  navigationLinks.forEach(link => {

    if (link.hash != "" && link.hash != "#") {

      let section = document.querySelector(link.hash);

      if (section.offsetTop <= fromTop &&

        section.offsetTop + section.offsetHeight > fromTop

      ) {

        link.classList.add('active');

      } else {

        link.classList.remove('active');

      }

    }


  })

});

nav a.active {

  color: darkcyan;

  border-bottom: 2px solid darkgoldenrod;

}



/* for demonstration purposes */


nav {

  position: fixed;

  top: 0;

}


#about,

#contact {

  height: 100vh;

}

<nav>

  <ul class="nav-links">

    <li><a class="active" href="#">Home</a></li>

    <li><a href="#about">About</a></li>

    <li><a href="#contact">Contact</a></li>

  </ul>

</nav>


<section>

  <div id="about">About</div>

  <div id="contact">Contact</div>

</section>


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號