Изменение основного контента

107

04 сентября 2019, 14:30

Есть сайт с 6-ю кнопками в меню. Смысл в том, что каждая кнопка меняет основной контент сайта (пытаюсь сделать что-то типо сайта без обновления). Проблем никаких не возникло, скорее неудобство. Что-бы вызвать новый контент, нужно спрятать возможный предыдущий. В JS и Jquery не силён, поэтому сделал так:

$("#button1").click(function () {
    $("#div1_div").fadeIn(1000);
    $("#div2_div").fadeOut(100);
    $("#div3_div").fadeOut(100);
    $("#div4_div").fadeOut(100);
    // и тд
}) 
$("#button2").click(function () {
    $("#div2_div").fadeIn(100);
    $("#div_div").fadeOut(100);
    // и тд
})

Это наверное глупо, не правильно и неудобно для работы. Как это можно упростить? Как сделать по человечески? P.S. React + Nodejs просьба не предлагать. Нет времени его изучать пока, сложновато. P.P.S. Пробовал Fullpage.js, немного не то + платные ограничения.

Answer 1

// Скрытие всех кроме одного 
for (let i = 6; i > 1; i--) $("#"+"content"+i).fadeOut(100); 
 
// Запоминаем не скрытый элемент 
lastID="content1" 
 
function setContent(id) { 
  // Показываем новый элемент  
  $("#"+id).fadeIn(1000); 
  // Скрываем предыдущий элемент 
  $("#"+lastID).fadeOut(100); 
   
  // Обновляем не скрытый элемент 
  lastID= id; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<button onclick="setContent('content1')"> 
1 
</button> 
<button onclick="setContent('content2')"> 
2 
</button> 
<button onclick="setContent('content3')"> 
3 
</button> 
<button onclick="setContent('content4')"> 
4 
</button> 
<button onclick="setContent('content5')"> 
5 
</button> 
<button onclick="setContent('content6')"> 
6 
</button> 
 
<div id="content1"> 
  CONTENT1 
</div> 
<div id="content2"> 
  CONTENT2 
</div> 
<div id="content3"> 
  CONTENT3 
</div> 
<div id="content4"> 
  CONTENT4 
</div> 
<div id="content5"> 
  CONTENT5 
</div> 
<div id="content6"> 
  CONTENT6 
</div>

Answer 2

Более короткий пример:

$("#button button").on('click', function () { 
	var key = $(this).index() + 1; /* Index - всегда считается с 0-ля*/ 
	$("#content div").hide(); 
	$("#content div:nth-of-type(" + key + ")").fadeIn(1000); 
 
});

#content div:not(:first-of-type){ 
display:none; 
} 
 
#button button{ 
display:inline-flex; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
 
<div id="button"> 
	<button>1</button> 
	<button>2</button> 
	<button>3</button> 
	<button>4</button> 
	<button>5</button> 
</div> 
 
 
<div id="content"> 
	<div>Content 1</div> 
	<div>Content 2</div> 
	<div>Content 3</div> 
	<div>Content 4</div> 
	<div>Content 5</div> 
 
</div>

P.S. Конечно при условии что у вас очерёдность кнопок и контента совпадает(!)

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Поиск слова и выделение

Натолкнулся на такую проблему, при поиск слова в тексте, выделяется только первоеПодскажите как сделать что бы алгоритм выделял все слова...

131

javascript

Ошибка при создании формы регистрации

Пытаюсь сделать форму регистрации на сайте, но получаю ошибку

118

javascript

Disabled на js? [закрыт]

Подскажите, нужно сделать на чистом js чтобы нечто вроде корзинки, а именно при нажатии на кнопку у нее был thissetAttribute("disabled", "disabled"), а по нажатию...

148

javascript

Найти Наименьший Делитель

Прохожу уроки на Hexlet и столкнулся с темой "итеративный процесс"Думаю, что в моем коде (см

126