removal of active class from nav tabs-CodePudding

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 >
  <p data-target="#initial" >Initial</p>
  <p data-target="#product">Product</p>
  <p data-target="#contact">Contact</p>
</div>
<div >
  <div data-content id="initial" >
    <div >
      <div >
      abc
    </div>
    <div >
      abc
    </div>
    <div >
      abc
    </div>
    </div>
  </div>
  <div data-content id="product">
    <div >
    <div >
      lmn
    </div>
    <div >
      lmn
    </div>
    <div >
      lmn
    </div>
  </div>
  </div>
  <div data-content id="contact">
    <div >
    <div >
      xyz
    </div>
    <div >
      xyz
    </div>
    <div >
      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');
  })
})

CodePudding user response：

You can use classList.remove()

Example:

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

More documentation

CodePudding user response：

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 >
  <p data-target="#initial" >Initial</p>
  <p data-target="#product">Product</p>
  <p data-target="#contact">Contact</p>
</div>
<div >
  <div data-content id="initial" >
    <div >
      <div >
      abc
    </div>
    <div >
      abc
    </div>
    <div >
      abc
    </div>
    </div>
  </div>
  <div data-content id="product">
    <div >
    <div >
      lmn
    </div>
    <div >
      lmn
    </div>
    <div >
      lmn
    </div>
  </div>
  </div>
  <div data-content id="contact">
    <div >
    <div >
      xyz
    </div>
    <div >
      xyz
    </div>
    <div >
      xyz
    </div>
    </div>
  </div>
</div>