0

Здравствуйте!

Смысл простой очень, нужно чтобы при нажатии на определенную кнопку button открывался div с определенный текстом (текст разный для каждой кнопки). Вопрос в том как можно проще это реализовать. Это нужно будет для каждого button присваивать отдельный id и создавать отдельную функцию для каждой кнопки (которая рисует div с нужным текстом) или есть более гуманные способы?

p/s кто-то через class советовал делать, но тогда я не понимаю как это работает, ведь по классу не обратишься к конкретному тексту.

<html>
        <head>
                <script type="text/javascript" src="test.js"></script>
                <title>ariadna wiki</title>
                <link rel="stylesheet" type="text/css" href="style.css">
        </head>
            <body>

                <div>
                    <ul>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    <button> </button>
                    </ul> 
                </div>

           </body>
        </html>
3
  • А где у вас дивы с текстами находятся? Покажите
    – stckvrw
    28 мар 2018 в 11:13
  • Вот я и думаю куда эти тексты запихнуть. Не хочется отдельный ссылки делать на другие страницы. Думал дивы запихнуть прям на главную страницу (по умолчанию они скрыты) и по щелчку по нужной кнпоке этот div отобразится на нужном месте. 28 мар 2018 в 11:34
  • Вам бы желательно сначала в SEO разобраться
    – stckvrw
    28 мар 2018 в 11:36

2 ответа 2

2

Обновление: Если у вас уже есть дивы с текстом можете их связать с кнопками например по атрибуту name

var elems = document.getElementsByTagName('button');
for (var i = 0; i < elems.length; i++) elems[i].addEventListener("click", handler);
var current;

function handler(event) {
  if (current) current.style.display = 'none';
  var name = event.target.getAttribute('name');
  current = document.querySelector(`div[name="${name}"]`);
  current.style.display = 'block';
};
div {
  display: none
}

.menu {
  display: block
}
<div class='menu'>
  <ul>
    <button name="Первый">1</button>
    <button name="Второй">2</button>
    <button name="Третий">3</button>
    <button name="Четвертый">4</button>
    <button name="Пятый">5</button>
    <button name="Шестой">6</button>
    <button name="Седьмой">7</button>
    <button name="Восьмой">8</button>
    <button name="Девятый">9</button>
    <button name="Десятый">10</button>
  </ul>
</div>
<div name="Первый">1</div>
<div name="Второй">2</div>
<div name="Третий">3</div>
<div name="Четвертый">4</div>
<div name="Пятый">5</div>
<div name="Шестой">6</div>
<div name="Седьмой">7</div>
<div name="Восьмой">8</div>
<div name="Девятый">9</div>
<div name="Десятый">10</div>

Или можно например отображаемый текст в атрибутах хранить и подставлять куда надо.

var elems = document.getElementsByTagName('button');
for (var i = 0; i < elems.length; i++) elems[i].addEventListener("click", handler);

function handler(event) {
  document.getElementById('container').innerText = event.target.getAttribute('text');
};
<div>
  <ul>
    <button text="Первый">1</button>
    <button text="Второй">2</button>
    <button text="Третий">3</button>
    <button text="Четвертый">4</button>
    <button text="Пятый">5</button>
    <button text="Шестой">6</button>
    <button text="Седьмой">7</button>
    <button text="Восьмой">8</button>
    <button text="Девятый">9</button>
    <button text="Десятый">10</button>
  </ul>
</div>
<div id="container">
  Пустой
</div>

10
  • Спасибо за ответ, но это годится в случае если текст содержит пару слов. А у меня будут целые предложения со своими стилями. Как быть в этом случае? 28 мар 2018 в 11:30
  • @VaagnAkopyan что значит текст со стилями?
    – yolosora
    28 мар 2018 в 11:33
  • это значит, что текст будет представлять из себя div у которого в свою очередь свой размер, цвет и т.д. 28 мар 2018 в 11:37
  • @VaagnAkopyan добавил вариант
    – yolosora
    28 мар 2018 в 12:16
  • Спасибо большое! 28 мар 2018 в 12:54
0

Если кнопки внутри своего контейнера идут в том же порядке что и div'ы внутри своего контейнера, тогда можно открывать div'ы по индексу кнопок:

var buttons = document.querySelectorAll('ul button');
for(var i = 0; i < buttons.length; i++) {
	(function(index){
		buttons[i].addEventListener('click', function(){
			var divIndex = index*1+1*1;
			document.querySelector('.divs div:nth-of-type('+divIndex+')').style.background = 'red'; // здесь прикрутите открытие блока
		});
	})(i);
}
<ul>
	<button>Кнопка 1</button>
	<button>Кнопка 2</button>
</ul>
<div class="divs">
	<div>Текст блока 1</div>
	<div>Текст блока 2</div>
</div>

где .divs - это контейнер с div'ами (можете поменять на свой класс)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.