<!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>
</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>
</body>
</html>
.tabs td {
width: 60px;
border: 2px solid gray;
text-align: center;
cursor: pointer;
}
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];
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.