3

<div class="panel panel-default">
  <div class="panel-heading">Главная</div>
  <div class="panel-body">
    <ul>
      <li><a data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_1</a>
      </li>
      <li><a data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_2</a>
      </li>
    </ul>
  </div>
</div>

Подскажите, пожалуйста, как при нажатии на Проверка_1 загрузить страницу с одним текстом, а при нажатии Проверка_2 - с другим? То есть, чтобы не делать для каждого текста новую страницу (html).

1 ответ 1

3

Можно сделать 2 блока с текстом и по умолчанию скрыть их. При нажатии на Проверка_1 с помощью javascript нужно отобразить блок с текстом, и так же для второго блока.

$("#check_1").click(function(){
  $("#text_1").toggleClass("hidden");
});
$("#check_2").click(function(){
  $("#text_2").toggleClass("hidden");
});
.hidden {
  opacity: 0;
}
.textbox {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">Главная</div>
  <div class="panel-body">
    <ul>
      <li><a id="check_1" data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_1</a>
      </li>
      <li><a id="check_2" data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_2</a>
      </li>
    </ul>
  </div>
</div>

<div id="text_1" class="textbox hidden">text 1</div>
<div id="text_2" class="textbox hidden">text 2</div>

3
  • Неплохо было бы увидеть код) и еще, а если будет много подобных ссылок? 17 ноя 2016 в 20:08
  • 1
    @Максим, обновил ответ
    – Abmin
    17 ноя 2016 в 20:15
  • Спасибо, думаю, дальше разберусь. 17 ноя 2016 в 20:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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