CODEWITHSUNDEEP
javascripthtmlcss
CodingT
CodingT

Reputation: 31

How to change location.hash without page scroll

I am trying to create a single page with multiple sections or content and want to make some of that content disappear when there is one that is targeted or hashed on the link.

I made this function using haschange but it became complicated because I needed to enter a different class and id than what I wanted, namely adjusting to the link that was going to be shown and the content appeared other than the intended link so the content disappeared.

here's my code

        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>

how to use location.hash based on href in order to match the id that will be addressed.

Upvotes: 0

Views: 276

Answers (2)

charlietfl
charlietfl

Reputation: 171669

While using target selector css will definitely solve this, the following is for situations where you really do need to modify classes or other properties.

You can simplify all the js by using common class names and looping over the elements in a collection and toggling classes based on conditional logic

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>

Upvotes: 1

Syed
Syed

Reputation: 704

CSS:target selector does the trick it represents a unique element (the target element) with an id matching the URL's fragment. SO get to by pass whole JS run around.

Trick is to make all div hide through CSS on default then let CSS work with DOM to figure out if link click has associated anchor div in code denoted through ID attribute if so work on it. If not simply keep sleeping.

.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>

external reference https://developer.mozilla.org/en-US/docs/Web/CSS/:target . Do keep in mind if done right it can be such a handy tool for SEO related issues that arise for SPA.

Upvotes: 0

Related Questions