почему не добавляется контент

Question

Как при нажатии на цифру (например 1) добавлялся контент который находится в теге p class ap ? после того как нажали на цифру (например 2) контент в цифре 1 удалялся ?
Элемент списка

let selectedTd;

document.querySelector('.wrapper').addEventListener('click', e => {
 let tagName = e.target;
 
 if( e.target != 'DIV' ){
   return;
 } 
  highlight(tagName); 
}, true)

function highlight(td) {
  if (selectedTd) { 
    selectedTd.classList.remove('block');
  }
  selectedTd = td;
  selectedTd.classList.add('block'); 
}

.wrapper{
  width: 500px;
  max-width: 500px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

}
.a{
  cursor: pointer;
  margin-left: 100px;
  border: 1px solid black;
  padding: 10px;
}
.ap{
  display: none;
}

#block{
  display: block !important;
}

<div class="wrapper">
  <div class='a'>1
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>

  <div class='a'>2
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>

  <div class='a'>3
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>

  <div class='a'>4
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>
</div>

Answer 1

Если добавить такой стиль .a.active .ap {display: block;} останется всего лишь переключать классы при клике:

document.querySelector('.wrapper').addEventListener('click', function(e){
  let target = e.target;
  if (!target.classList.contains('a')) return;
  
  highlight(target);
});

function highlight(target) {
  let active = document.querySelector('.wrapper .a.active');  
  if( active ) active.classList.remove('active');
  
  target.classList.add('active');
}

.wrapper {
  width: 500px;
  max-width: 500px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.a {
  cursor: pointer;
  margin-left: 100px;
  border: 1px solid black;
  padding: 10px;
}

.ap {
  display: none;
}

#block {
  display: block !important;
}

.a.active .ap {display: block;}

<div class="wrapper">
  <div class='a'>1
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>

  <div class='a'>2
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>

  <div class='a'>3
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>

  <div class='a'>4
    <p class="ap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, consectetur?</p>
  </div>
</div>

Со стилями надо поработать, не знаю как именно вы себе представляли переключение.

P.s. Однобуквенные названия классов - такая себе идея)

БЛОГ НА HUSL

почему не добавляется контент

Ответы (1 шт):