Как сделать работающие вкладки?

Общее
1

Привет, подскажите, пожалуйста, как делать вкладки между которыми можно переключаться?

2

Примерно так.

1 лайк
3

Спасибо, мне очень помогло! только не понимаю как связать вкладку и содержимое (чтоб отображался только нужный блок)

4

Покажите свой код, желательно тоже через песочницу.

5

Это ужасно, но у меня в песочнице совсем ничего не работает. Попробую разобраться пока сама тогда о приличной версии)
У меня почему-то при переходе по вкладкам содержимое просто становится невидимым, но не исчезает со страницы и соответственно занимает место

6

Пробуйте. Если не получится, то присылайте код. Будем разбираться вместе.

7

Здравствуйте.
Смотря с чем вы работайте,с данными с сервера или с данными которые в DOM дереве.
Если данные пришли с сервера,то вот так можно.

Разметка

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.tabs td {
			width: 60px;
			border: 2px solid gray;
			text-align: center;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<table>
		<tr class="tabs">
			<td class="tab-a">A</td>
			<td class="tab-b">B</td>
			<td class="tab-c">C</td>
		</tr>
	</table>
	<p class="description">empty</p>
	<script src="/index.js"></script>
	
</body>
</html>

JS

const descriptions = ['Tab-А','Tab-B','Tab-C'] //данные

const description = document.querySelector('.description'); //описание

const tabA = document.querySelector('.tab-a'); //Вкладки

const tabB = document.querySelector('.tab-b');

const tabC = document.querySelector('.tab-c');

`//Обработка кликов`
    tabA.addEventListener('click',()=>{

description.textContent = descriptions[0];

tabB.addEventListener('click',()=>{

description.textContent = descriptions[1];

})

tabC.addEventListener('click',()=>{

description.textContent = descriptions[2];

})

Написал так,чтобы вам более менее было понятно