Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2015, 11:39
Новичок на форуме
Отправить личное сообщение для Pladzuma Посмотреть профиль Найти все сообщения от Pladzuma
 
Регистрация: 10.11.2015
Сообщений: 4

текст блока в зависимости от нажатой ссылки
Всем доброго времени суток! В 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 и кстати если например первая ссылка уже нажата, то хотелось бы чтобы нажав на вторую ссылку текст также заменялся. Спасибо заранее.
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2015, 11:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Pladzuma
желательно на чистом JS
А есть "грязный"?

То есть нужно изменять содержимое этого блока без перезагрузки страницы?
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2015, 12:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Pladzuma,
для медитации
Альтернативный текст изображения сделать видимым
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2015, 03:09
Новичок на форуме
Отправить личное сообщение для Pladzuma Посмотреть профиль Найти все сообщения от Pladzuma
 
Регистрация: 10.11.2015
Сообщений: 4

спасибо за линк, работать работает, но от нужного мне сильно отличается, а адаптировать под свою задачу никак не получилось, так как даже базовых знаний по js пока у меня нет, можно ли попроще сделать?
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2015, 08:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03