如何突出顯示用戶在 javascript 中查看的當前部分？

Question

我正在為一個有四個部分的項目編寫一個簡單的導航欄，並且我使它具有足夠的交互性，以便在懸停/單擊一個部分時具有特定的顏色，然后在單擊后返回其原始顏色。 但是，如果我希望選定的部分在用戶查看時仍然被着色/突出顯示怎么辦？ 因此，如果懸停顏色編碼為藍色，我希望導航欄中的部分在用戶選擇它時仍為藍色，然后在用戶選擇另一個部分時更改。 到目前為止，這是我的代碼。

// The mouse hover functiona and commands. Here we specificy the color of the buttons/mouse
 // when the user clicks on them, there's a color for hovering/clicking
 // and a color for leaving the button

 function mouseOver () {
    let anchor = document.getElementsByTagName('a');

    for (i = 0; i < anchor.length; i++) {
        anchor[i].addEventListener('mouseover', function handleMouseOver() {
            event.target.style.backgroundColor = "#72a6ca";
            event.target.style.color = "#fff";
        })
        //the color returns to its normal state after clicking away
        anchor[i].addEventListener('mouseout', function handleMouseOut() {
            event.target.style.backgroundColor = "rgb(220, 220, 220)";
            event.target.style.color = "black";
            })
        }
    }

這是我的導航欄顯示代碼

function navBarStyle () {
    let anchor = document.getElementsByTagName('a');
    let styles = `
        display: flex;
        flex-direction: row;
        align-items: stretch;
        color: #000;
        text-decoration: none;
        margin: 0 0.5em 0 0.5em;
        padding: 0.5em;
        background-color: rgb(220, 220, 220);
        font-size: large;
        transform:translateX(-0.5em);
    `;

    for (i = 0; i < anchor.length; i++) {
        anchor[i].setAttribute('style', styles);
    } }

如果我不夠含糊，我很抱歉，但任何幫助將不勝感激，讓我走上正軌

Answer 1

首先，為您當前的實現做一個說明。 它可以工作，而且編碼得很好。 但是對於這件事，瀏覽器使用 :hover 選擇器提供本機功能，使用它比重新發明它更好。

我沒有您的 HTMl，但您很可能需要為導航中的每個“a”標簽添加一個類，如下所示：

<nav>
    <a href="link1" class="nav-link">Link 1</a>
    <a href="link2" class="nav-link">Link 2</a>
</nav>

然后你需要在頭部有一個樣式標簽（或者更好，外部css）

<head>
...
<style>
  .nav-link {
    background-color: 72a6ca;
    color: #fff;
  }

  .nav-link:hover {
     background-color: rgb(220, 220, 220);
     color: black;
  }
</style>
</head>

至於當前部分，您最好的選擇是使用https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

請參閱此處的示例： Intersection Observer API 滾動感知導航

或者這個codepen： https ://codepen.io/mishunov/pen/opeRdL

使用 IntersectionObserver，您可以檢測用戶何時滾動進/出該部分。 然后，您可以打開和關閉相關導航鏈接的另一個類。 例如 - 假設您切換 .current 類，您的樣式可能看起來像這樣，將兩種情況（懸停和當前滾動）設置在一個位置：

  .nav-link:hover, 
  .nav-link.current {
     background-color: rgb(220, 220, 220);
     color: black;
  }

Answer 2

您可以像這樣使一個名為 active 的類

.active {
    backgroundColor: #72a6ca;
    color: #fff;
}

並將其分配給單擊（或懸停）的每個錨點，同時從其他錨點中刪除.active

let anchors = document.getElementsByTagName('a');


for (let anchor of anchors) {
        anchor.addEventListener('mouseover', function handleMouseOver() {
        const target = event.currentTarget;
        if (target.classList.contains('active')) {
            target.classList.remove('active')
        } else {
            [...anchors].forEach((anchor) => anchor.classList.remove('active'))
            target.classList.add('active')
        }
    })
}

如果你想給 viewPort 中的錨active類，請使用以下代碼：

const anchors = document.getElementsByTagName('a');

const isInViewport = el => {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

const run = () =>
  anchors.forEach(item => {
    if (isInViewport(item)) {
      item.classList.add('active');
    }
  });

// Events
window.addEventListener('load', run);
window.addEventListener('resize', run);
window.addEventListener('scroll', run);

如何突出顯示用戶在 javascript 中查看的當前部分？

問題描述

2 個解決方案

解決方案1
0 已采納 2022-06-20 10:00:00

解決方案2
-1 2022-06-20 10:18:59

如何突出顯示用戶在 javascript 中查看的當前部分？

問題描述

2 個解決方案

解決方案1 0 已采納 2022-06-20 10:00:00

解決方案2 -1 2022-06-20 10:18:59

解決方案1
0 已采納 2022-06-20 10:00:00

解決方案2
-1 2022-06-20 10:18:59