Question 45642 in CSS Question posted in
Some basic documentation can be found here.

removal of active class from nav tabs – CSS

Well, i tried to create a layout like instagram and faced the following problem. I hope i’ll get help from experts in this regard. And i tried various ways to remove the active class after clicking on the nav tab , but everytime there arose a problem. let me know how can i remove the active class from this piece of javascript as attached below.

<div class="menu">
  <p data-target="#initial" class="active">Initial</p>
  <p data-target="#product">Product</p>
  <p data-target="#contact">Contact</p>
</div>
<div class="content">
  <div data-content id="initial" class="active">
    <div class="cards">
      <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    </div>
  </div>
  <div data-content id="product">
    <div class="cards">
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
  </div>
  </div>
  <div data-content id="contact">
    <div class="cards">
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    </div>
  </div>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Sans-serif;
}
body{
  padding: 5%;
}
.menu{
  display:flex;
}
.menu p{
  margin-right: 2rem;
  cursor: pointer;
}
.content{
  margin-top:2rem;
}
[data-content]{
  display:none;
}
.active[data-content]{
  display:block;
}
.menu .active{
  text-transform:uppercase;
  color:#FFF;
  background: #000;
  padding:  5px 10px;
  margin-top: -5px;
  border-radius: 50px;
}
.menu p{
  text-transform:uppercase;
}
.cards{
  display:flex;
  flex:1;
  flex-basis: 33.33%;
  max-width: 33.33%;
  min-width: 33.33%;
  height: 100%;
  position: relative;
}
.card{
          border: 1px solid #ccc;
        background: #fff;
}

const targets = document.querySelectorAll('[data-target]');
const content = document.querySelectorAll('[data-content]');

targets.forEach(target => {
  target.addEventListener('click',()=>{
   
    content.forEach(c => {
      c.classList.remove('active')
      
    })
    
    const t = document.querySelector(target.dataset.target)
    t.classList.add('active');
      target.classList.add('active');
  })
})
Tags:

2

Answers


  1. 0

    You can use classList.remove()

    Example:

    var element = document.getElementById("targetid");
  element.classList.remove("active");

    More documentation

    Login or Signup to reply.
  2. 0

    Your javascript code is almost working, but there are typos in contents instead content. That typo makes javascript returns an error and the code below doesn’t be executed. And you can remove the active class from that tab by targets.forEach(...

    const targets = document.querySelectorAll('[data-target]');
const contents = document.querySelectorAll('[data-content]');

targets.forEach(target => {
  target.addEventListener('click',()=>{
    
    targets.forEach(t => {
      t.classList.remove('active')
    })
    contents.forEach(c => {
      c.classList.remove('active')
    })
    
    const t = document.querySelector(target.dataset.target)
    t.classList.add('active');
    target.classList.add('active');
  })
})
    *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Sans-serif;
}
body{
  padding: 5%;
}
.menu{
  display:flex;
}
.menu p{
  margin-right: 2rem;
  cursor: pointer;
}
.content{
  margin-top:2rem;
}
[data-content]{
  display:none;
}
.active[data-content]{
  display:block;
}
.menu .active{
  text-transform:uppercase;
  color:#FFF;
  background: #000;
  padding:  5px 10px;
  margin-top: -5px;
  border-radius: 50px;
}
.menu p{
  text-transform:uppercase;
}
.cards{
  display:flex;
  flex:1;
  flex-basis: 33.33%;
  max-width: 33.33%;
  min-width: 33.33%;
  height: 100%;
  position: relative;
}
.card{
          border: 1px solid #ccc;
        background: #fff;
}
    <div class="menu">
  <p data-target="#initial" class="active">Initial</p>
  <p data-target="#product">Product</p>
  <p data-target="#contact">Contact</p>
</div>
<div class="content">
  <div data-content id="initial" class="active">
    <div class="cards">
      <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    </div>
  </div>
  <div data-content id="product">
    <div class="cards">
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
  </div>
  </div>
  <div data-content id="contact">
    <div class="cards">
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search