Pladzuma,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active{
background-color: rgb(0, 0, 205);
color: rgb(255, 255, 255);
padding: 2px 4px;
border-radius: 4px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var a = document.querySelectorAll('.text'),
show = document.querySelector('#showdiv p');
[].forEach.call(a, function(a) {
a.addEventListener('click', function() {
var p = a.nextElementSibling,
active = document.querySelector('.active');
if(active) active.classList.remove('active');
a.classList.add('active');
show.innerHTML = p.innerHTML;
});
});
});
</script>
</head>
<body>
<div id="showdiv"><!-- блок где будет выводиться текст после нажатия на ссылки-->
<p>Приветствуем вас на нашем сайте!</p><!-- этот текст будет сначала при входе на страницу -->
</div>
<a class="text">BMW</a><!-- Первая ссылка, после нажатия на неё в блоке #showdiv текст должен замениться на текст ниже, то есть "Автомобиль немецкого производства" -->
<p>Автомобиль немецкого производства</p>
<a class="text">Honda</a><!-- и также здесь как и в случае с первой ссылкой -->
<p>Автомобиль японского производства</p>
</body>
</html>