1

Возникла проблема с добавлениeм классов css с помашю Javascript . Есть задача не использовать jquery. Проблема заключается втом что при нажати на текст исчезают все блоки а не те которые нужны. Заранее спасибо вот код

<div class="top-navigation" id="div">
             <p>Content-One</p>
                <p>Content-Two</p>
                   <p>Content-Three</p>
        </div>  

    <div class="content-wrapper" id="wrapper">
        <div class="content visible">
            <h1>Content-One</h1>
        </div>
        <div class="content">
            <h1>Content-Two</h1>
        </div>
        <div class="content">
            <h1>Content-Three</h1>
        </div>
    </div>

<script type="text/javascript">
     var content=document.getElementById('wrapper').getElementsByClassName('content');
     var btn=document.getElementById('div').getElementsByTagName('p');

for(var i=0; i < btn.length; i++){
    btn[i].addEventListener("click" , openfunction);
    }

  function openfunction(){
    for(var i=0; i < content.length; i++){
         content[i].classList.remove('visible');
           }
           this.classList.add('visible');    
    }

</script>

var content = document.getElementById('wrapper').getElementsByClassName('content');
var btn = document.getElementById('div').getElementsByTagName('p');

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", openfunction);
}

function openfunction() {
  for (var i = 0; i < content.length; i++) {
    content[i].classList.remove('visible');
  }
  this.classList.add('visible');
}
.content {
  display:none;
}

.visible {
  display:block;
}
<div class="top-navigation" id="div">
  <p>Content-One</p>
  <p>Content-Two</p>
  <p>Content-Three</p>
</div>

<div class="content-wrapper" id="wrapper">
  <div class="content visible">
    <h1>Content-One</h1>
  </div>
  <div class="content">
    <h1>Content-Two</h1>
  </div>
  <div class="content">
    <h1>Content-Three</h1>
  </div>
</div>

1 ответ 1

0

var content = document.getElementById('wrapper').getElementsByClassName('content');
var btn = document.getElementById('div').getElementsByTagName('p');

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", openfunction);
}

function openfunction() {
  for (var i = 0; i < content.length; i++) {
    content[i].classList.remove('visible');
  }
  for (var j = 0; j < btn.length; j++) {
    if (btn[j] == this) {
      content[j].classList.add('visible');
      break;
    }
  }
}
.content {
  display:none;
}

.visible {
  display:block;
}
<div class="top-navigation" id="div">
  <p>Content-One</p>
  <p>Content-Two</p>
  <p>Content-Three</p>
</div>

<div class="content-wrapper" id="wrapper">
  <div class="content visible">
    <h1>Content-One</h1>
  </div>
  <div class="content">
    <h1>Content-Two</h1>
  </div>
  <div class="content">
    <h1>Content-Three</h1>
  </div>
</div>

2
  • Спасибо за ответ очень помогло.Но Уменя есть вопрос .Вместо переменую J можоно сипользовать let. 10 окт 2018 в 18:58
  • 1
    @RiveraTimeClub Можно, конечно. В данном случае это не имеет значения.
    – user176262
    10 окт 2018 в 18:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.