<!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];
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.