Что дописать для того что бы при клике менялись div?

Question

Тимур @idtimurkolomeets

JavaScript

Что дописать для того что бы при клике менялись div?

есть 3 div с контентом 1 див активен , второй и третий hide
нужно что бы при клике на li новости открывался первый див
При клике li Анонсы открывался второй див и т.д , а другие получали класс hide

$(function() {

    $('#nav').on('click', 'li', function(event) {
	$('#hide').addClass("hide")(думаю вот суда что то дописать ???).removeClass("hide");
         $(this).addClass("active").siblings().removeClass("active");
         event.preventDefault();


    });

});

И вот HTML

<section class="second_news">
  <div id="next" class="container">
    <div class="row">
      <div class="col">
        <ul class="second" id="nav">
          <li id="test"class="second__item active"><a href="#">Новости</a></li>
          <li id="test" class="second__item"><a href="#">Анонсы</a></li>
          <li id="test" class="second__item"><a href="#">Инфоблок</a></li>
        </ul>
      </div>
    </div>
    <div  class="row">
    <div id="hide" class="col-xl-9">
<div class="back-color d-flex">
<div class="col">
  <div class="content-news">
    <div class="content-news__item">
      <img src="img/new.png">
      <div class="content-news__text">
        <span>5 дек 2018 г.</span>
        <span><img src="img/eye.png">480</span>
        <p class="news__text"><a href="#">Ключи от 59 новых «скорых» Олег Кожемяко вручил главврачам Приморья</a></p>
      </div>
    </div>
  </div>
  <div class="content-news">
    <div class="content-news__item">
      <img src="img/new.png">
      <div class="content-news__text">
        <span>5 дек 2018 г.</span>
        <span><img src="img/eye.png">480</span>
        <p class="news__text"><a href="#">Ключи от 59 новых «скорых» Олег Кожемяко вручил главврачам Приморья</a></p>
      </div>
    </div>
  </div>
   <div class="content-news">
    <div class="content-news__item">
      <img src="img/new.png">
      <div class="content-news__text">
        <span>5 дек 2018 г.</span>
        <span><img src="img/eye.png">480</span>
        <p class="news__text"><a href="#">Ключи от 59 новых «скорых» Олег Кожемяко вручил главврачам Приморья</a></p>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="content-news">
    <div class="content-news__item">
      <img src="img/new.png">
      <div class="content-news__text">
        <span>5 дек 2018 г.</span>
        <span><img src="img/eye.png">480</span>
        <p class="news__text"><a href="#">Ключи от 59 новых «скорых» Олег Кожемяко вручил главврачам Приморья</a></p>
      </div>
    </div>
  </div>
  <div class="content-news">
    <div class="content-news__item">
      <img src="img/new.png">
      <div class="content-news__text">
        <span>5 дек 2018 г.</span>
        <span><img src="img/eye.png">480</span>
        <p class="news__text"><a href="#">Ключи от 59 новых «скорых» Олег Кожемяко вручил главврачам Приморья</a></p>
      </div>
    </div>
  </div>
   <div class="content-news">
    <div class="content-news__item">
      <img src="img/new.png">
      <div class="content-news__text">
        <span>5 дек 2018 г.</span>
        <span><img src="img/eye.png">480</span>
        <p class="news__text"><a href="#">Ключи от 59 новых «скорых» Олег Кожемяко вручил главврачам Приморья</a></p>
      </div>
    </div>
  </div>
</div>
</div>
</div>

Вопрос задан более трёх лет назад
62 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 1

5 комментариев

Тимур @idtimurkolomeets Автор вопроса

$(function() {

    $('#t1').on('click', function(event) {
	$('#hide1').show(300);
	$("#hide2").hide(300)
	$("#hide3").hide(300);
})
	$('#t2').on('click', function(event) {
	$('#hide1').hide(300);
	$("#hide2").show(300)
	$("#hide3").hide(300);
})
	$('#t3').on('click', function(event) {
	$('#hide1').hide(300);
	$("#hide2").hide(300)
	$("#hide3").show(300);

    });

});

нормально?

Написано более трёх лет назад

Максим @ikfah012

Тимур, ну если вам это подходит...)

Написано более трёх лет назад
Тимур @idtimurkolomeets Автор вопроса

Максим, по классу выборка должна быть. Алгоритм примерно такой: при клике у всех элементов убираем класс-признак и вешаем его на кликнуты элемент.

Написано более трёх лет назад
Максим @ikfah012
Тимур, Ну так и что вам мешает сделать выборку по классу?)
Самый простой пример:
<button type="button" onclick="$('.test-class').show ()"> <div class="test-class" hidden="true"> <img src="1.png"> </div>

По клику кнопки открывается класс с атрибутом hidden.
В вашем случае, я так понимаю, вам нужно сделать как-то так:
<li id="test"class="second__item active" onclick="$('.contet-news').show ()"><a href="#">Новости</a></li>

И в это же событие добавляете $('.класс').hide()
для классов, которые нужно скрыть.
Но это, если я вас правильно понял)
Написано более трёх лет назад
Тимур @idtimurkolomeets Автор вопроса
Максим, неа не то )
есть у меня вот к примеру
<div class="js-news"> новость </div> <div class="js-news"> новость </div> <div class="js-news"> новость </div>

и есть
<ul class="second" id="nav"> <li id="t1"class="second__item active"><a href="#">Новости</a></li> <li id="t2" class="second__item"><a href="#">Анонсы</a></li> <li id="t3" class="second__item"><a href="#">Инфоблок</a></li> </ul>

у js-news прописано display none
Надо при клике на Новости показал первый эелемент , когда тыкаю на Анонсы показывает только второй и т.д
Написано более трёх лет назад