текст блока в зависимости от нажатой ссылки
Всем доброго времени суток! В js не так силен так как я сам учусь ещё на php программировать, есть одна задача которую хотел опробовать, но никак не могу довести до нужного результата . Поэтому не судите строго пожалуйста. Задача такова:
Есть основной блок к примеру #showdiv в котором при входе на страницу текст приветствия. И есть несколько ссылок, либо в списке <li> либо в таблице <td> каждая из них не ведёт на другую страницу, а выводит относящийся к этой ссылке текст в блок #showdiv. Подробнее ниже <div id="showdiv"><!-- блок где будет выводиться текст после нажатия на ссылки--> <p>Приветствуем вас на нашем сайте!</p><!-- этот текст будет сначала при входе на страницу --> </div> <a>BMW</a><!-- Первая ссылка, после нажатия на неё в блоке #showdiv текст должен замениться на текст ниже, то есть "Автомобиль немецкого производства" --> <p>Автомобиль немецкого производства</p> <a>Honda</a><!-- и также здесь как и в случае с первой ссылкой --> <p>Автомобиль японского производства</p> p.s. буду очень благодарен если всё будет в виде отдельного скрипта и желательно на чистом JS и кстати если например первая ссылка уже нажата, то хотелось бы чтобы нажав на вторую ссылку текст также заменялся. Спасибо заранее. |
Цитата:
То есть нужно изменять содержимое этого блока без перезагрузки страницы? |
|
спасибо за линк, работать работает, но от нужного мне сильно отличается, а адаптировать под свою задачу никак не получилось, так как даже базовых знаний по js пока у меня нет, можно ли попроще сделать?
|
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>
|
| Часовой пояс GMT +3, время: 05:53. |