Question

我试图在点击后保持链接悬停效果。这是我目前拥有的：

HTML：

    <div class="nav-desktop">
        <ul class="desktop-list">
            <li class="desktop-link"><a class="link is-active" href="index.html">Home</a></li>
            <li class="desktop-link"><a class="link" href="html/about.html">About</a></li>
            <li class="desktop-link"><a class="link" href="html/blog.html">Blog</a></li>
            <li class="desktop-link"><a class="link" href="html/projects.html">Projects</a></li>
            <li class="desktop-link"><a class="link" href="html/contact.html">Contact</a></li>
        </ul>
    </div>

CSS：

.link {
    color: var(--dracula-pink);
    padding: 5px 5px 5px 5px;
    margin-right: 5rem;
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1);
}

.link:hover {
    background-repeat: repeat-x;
    background-position: left 0% bottom -5%;
    background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
    background-size: 100% 18%;
    transition: ease-in 0.2s;
}

.link.is-active {
    background-repeat: repeat-x;
    background-position: left 0% bottom -5%;
    background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
    background-size: 100% 18%;
}

JS：

const link = document.querySelector(".link");
link.addEventListener("click", toggleActive);

function toggleActive() {
    link.classList.toggle("is-active");
};

我知道我必须添加一些东西来消除上一个链接的影响，但在我能想到的每个变化之后，我什至无法将这部分放下。

Answer 1

您使用的 el.querySelector() 只会返回找到的第一个匹配元素。您需要获取元素选择器的整个 nodeList，使用 el.querySelectorAll() 然后运行 nodeList通过循环并将您的函数放在 eventListener 中。由于您要删除活动类，因此有多种方法可以执行此操作。我通过简单地使用 el.forEach 循环从所有元素中删除它，然后将 classList 设置为函数中事件的 event.target。

您可以使用条件来检查哪个元素具有活动类，然后也可以在单击时切换/删除它，但这会在您的函数中添加更多代码。

编辑：OP 想要确定在 href 将它们发送到另一个页面后哪个链接被按下。在这种情况下，不需要 JS，只需在该页面 HTML 中的相应页面按钮中静态设置类即可。

如果你真的想使用JS，你可以在每个页面的body标签中添加一个id，即在contact页面上 --> { {1}} 对应于每个导航页面链接按钮的 textContact。然后使用 JS，去掉 eventListener 并简单地查找 <body id="Contact">，如果它等于 nodeList 循环中的 body.id，则设置活动类。

link.textContent

用户点击 links.forEach(link => document.body.id === link.textContent ? link.classList.add("is-active") : null) 上的 About

^^^^^^^^^^^^^^^^^^^^^

about.html

这是原始问题的答案：

<li class="desktop-link is-active"><a class="link" href="html/about.html">About</a></li>

//--> you need to get all the elements in the nodeList 
//--> with the class .link --> querySelectorAll()
const links = document.querySelectorAll(".link");
//--> loop over these elements and add the eventListener 
links.forEach(link => document.body.id === link.textContent ? link.classList.add("is-active") : null)

.link {
  color: var(--dracula-pink);
  padding: 5px 5px 5px 5px;
  margin-right: 5rem;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1);
}

.link:hover {
  background-repeat: repeat-x;
  background-position: left 0% bottom -5%;
  background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
  background-size: 100% 18%;
  transition: ease-in 0.2s;
}

.link.is-active {
  background-repeat: repeat-x;
  background-position: left 0% bottom -5%;
  background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
  background-size: 100% 18%;
}

Answer 2

我认为上面的人误解了要求。

首先，这是一个菜单挖掘，当你点击链接时，页面上会有一个重定向。

然后您必须找出您当前所在的站点/页面，然后在菜单中选择当前链接。

有不懂的地方一定要问

这是我的解决方案。

// this should be on a masterPage alt all pages
const link = document.querySelectorAll(".nav-desktop .link");
var href = window.location.href;

link.forEach(x=> {
  // Now look at the href of the page an compare it with your menu then select the current(right) link
  if (!href || href =="" || href =="/")
      {
        // if its empty then select the first one eg the default index.html
        if (x.getAttribute("href") == "index.html")
            x.classList.add("is-active");
      }else if (href.toLowerCase().indexOf(x.getAttribute("href").toLowerCase()) != -1)
            x.classList.add("is-active");
});

.link {
  color: var(--dracula-pink);
  padding: 5px 5px 5px 5px;
  margin-right: 5rem;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1);
}

.link:hover {
  background-repeat: repeat-x;
  background-position: left 0% bottom -5%;
  background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
  background-size: 100% 18%;
  transition: ease-in 0.2s;
}

.link.is-active {
  background-repeat: repeat-x;
  background-position: left 0% bottom -5%;
  background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
  background-size: 100% 18%;
}

<div class="nav-desktop">
  <ul class="desktop-list">
    <li class="desktop-link"><a class="link is-active" href="index.html">Home</a></li>
    <li class="desktop-link"><a class="link" href="html/about.html">About</a></li>
    <li class="desktop-link"><a class="link" href="html/blog.html">Blog</a></li>
    <li class="desktop-link"><a class="link" href="html/projects.html">Projects</a></li>
    <li class="desktop-link"><a class="link" href="html/contact.html">Contact</a></li>
  </ul>
</div>

点击后如何保持链接悬停动画？

2 个答案: