Question

我正在尝试创建包含多个部分或内容的单个页面，并希望在链接上有针对性或散列的内容时使其中一些内容消失。

我使用 haschange 制作了这个函数，但它变得复杂，因为我需要输入一个与我想要的不同的类和 ID，即调整到将要显示的链接并且内容出现在预期的链接之外，因此内容消失了。

这是我的代码

        window.addEventListener("hashchange", () => {
            if(window.location.hash === "#home"){
            document.querySelector('#home').classList.add('active')
            document.querySelector('#projects').classList.remove('active')
            document.querySelector('#skills').classList.remove('active')
            document.querySelector('#about').classList.remove('active')
            }
            if(window.location.hash === "#projects"){
            document.querySelector('#projects').classList.add('active')
            document.querySelector('#home').classList.remove('active')
            document.querySelector('#skills').classList.remove('active')
            document.querySelector('#about').classList.remove('active')
            }
            if(window.location.hash === "#skills"){
            document.querySelector('#skills').classList.add('active')
            document.querySelector('#home').classList.remove('active')
            document.querySelector('#projects').classList.remove('active')
            document.querySelector('#about').classList.remove('active')
            }
            if(window.location.hash === "#about"){
            document.querySelector('#about').classList.add('active')
            document.querySelector('#home').classList.remove('active')
            document.querySelector('#skills').classList.remove('active')
            document.querySelector('#projects').classList.remove('active')
            }
        });

a{padding:20px; margin-right: 5px;}
#home, #projects, #skills, #about { display: none;}
#home.active, #projects.active, #skills.active, #about.active{display:block}

<a href='#home' class=''>home</a><a href='#projects' class=''>projects</a><a href='#skills' class=''>skills</a><a href='#about' class=''>about</a>

<div id='home' class='active'>
<p>content home.</p>
</div>
<div id='projects'>
<p>content projects.</p>
</div>
<div id='skills'>
<p>content skills.</p>
</div>
<div id='about'>
<p>content about.</p>
</div>

如何使用基于 href 的 location.hash 以匹配将要寻址的 id。

Answer 1

虽然使用目标选择器 css 肯定可以解决这个问题，但以下是您确实需要修改类或其他属性的情况。

您可以通过使用通用类名并循环遍历集合中的元素并根据条件逻辑切换类来简化所有 js

const items = document.querySelectorAll('.item')

window.addEventListener("hashchange", (e) => {
  const id = location.hash.slice(1);
  items.forEach(elem => {
    const isActive = elem.id === id;
    elem.classList.toggle('active', isActive);
  });
});

a {
  padding: 20px;
  margin-right: 5px;
}

.item {
  display: none;
}

.item.active {
  display: block
}

<a href='#home' class=''>home</a><a href='#projects' class=''>projects</a><a href='#skills' class=''>skills</a><a href='#about' class=''>about</a>

<div id='home' class='item active'>
  <p>content home.</p>
</div>
<div id='projects' class="item">
  <p>content projects.</p>
</div>
<div id='skills' class="item">
  <p>content skills.</p>
</div>
<div id='about' class="item">
  <p>content about.</p>
</div>

Answer 2

CSS:target 选择器的作用是代表一个唯一元素（目标元素），其 id 与 URL 的片段相匹配。所以绕过整个 JS 运行。

诀窍是让所有 div 在默认情况下通过 CSS 隐藏，然后让 CSS 与 DOM 一起工作，以确定链接点击是否与通过 ID 属性表示的代码中的锚点 div 相关联，如果有的话。如果不是干脆继续睡觉。

.tab div {
  display: none;
}

.tab div:target {
  display: block;
}

<div class="tab">

<a href="#link1">Item 1</a>   
<a href="#link2">Item 2</a>
<a href="#link3">Item 3</a>
 <a href="#link4">No Item</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  
</div>

</div>

外部参考 https://developer.mozilla.org/en-US/docs/Web/CSS/:target 。请记住，如果做得对，它可以成为解决 SPA 出现的 SEO 相关问题的便捷工具。

如何在没有页面滚动的情况下更改 location.hash

2 个答案: