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

Question

[Тимур]

есть 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>

Answer 1

[Максим]

Вам нужно использовать .show .
$( ".нужный класс" ).show();

Comments

[Тимур]

$(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);

    });

});

нормально?

[Максим]

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

[Тимур]

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

[Максим]

Тимур, Ну так и что вам мешает сделать выборку по классу?)
Самый простой пример:

<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()
для классов, которые нужно скрыть.
Но это, если я вас правильно понял)

[Тимур]

Максим, неа не то )
есть у меня вот к примеру

<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
Надо при клике на Новости показал первый эелемент , когда тыкаю на Анонсы показывает только второй и т.д