Как менять содержимое div, по ссылке?

Question

[fuckingawesomenigga]

Вернее будет сказать, менять видимость div блока.


то есть нажал на ссылку, высветился только соответствующий блок, подскажите как реализовать?

<div class="row">
				<div class="col-2">
					<ul>
						<li><a href="/">Категория 1</a></li>
						<li><a href="/">Категория 2</a></li>
						<li><a href="/">Категория 3</a></li>
						<li><a href="/">Категория 4</a></li>
					</ul>
				</div>
				<div class="col-10">
					<div class="">Контент 1</div>
					<div class="">Контент 2</div>
					<div class="">Контент 3</div>
					<div class="">Контент 4</div>
				</div>
			</div>

Comments

[Кирилл Конторович]

<div class="col-2">
          <ul>
            <li><a class="cat" id="1" href="/">Категория 1</a></li>
            <li><a class="cat" id="2" href="/">Категория 2</a></li>
            <li><a class="cat" id="3" href="/">Категория 3</a></li>
            <li><a class="cat" id="4" href="/">Категория 4</a></li>
          </ul>
        </div>
        <div class="col-10">
          <div id="content_1" class="">Контент 1</div>
          <div id="content_2" class="">Контент 2</div>
          <div id="content_3" class="">Контент 3</div>
          <div id="content_4" class="">Контент 4</div>
        </div>
      </div>

Если используете jQuery то супер легко

$('.cat').on('click', function() {
   let content = $('#content_' + $(this).attr('id'));
   $(content).style.display = 'block';
})

Answer 1

[Андрей Гончаров]

На jquery можно так:

$('ul li a').on('click', function (e) {
    e.preventDefault();
    const index = $(this).parent().index();
    $('.col-10 > div').removeClass('active').eq(index).addClass('active');
})

Ну а в классе active уже прописывай нужные тебе анимации появления. либо просто display none/block

Answer 2

[Антон Иванов]

Судя по коду, вы используете bootstrap. Компонент tabs вам в помощь. А вообще без JavaScript это не реализуется.