@ligisayan

Как создать ссылку по которой переходит на содержимое вкладки аккордеона?

Приветствую всех! Есть на первой странице меню, а на второй связанной в рамках одного сайта аккордеон. Как сделать так, чтобы по клику пункта меню открывалась страница с соответствующей раскрытой вкладкой? Вот так-то якорь передает и на страницу-то переходит, но вкладку соответствующую не открывает..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!-- Меню на первой странице index.html -->
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="index2.html#collapse-1">Вкладка 1</a>
    </li>
    <li><a href="index2.html#collapse-2">Вкладка 2</a>
    </li>
    <li><a href="index2.html#collapse-3">Вкладка 3</a>
    </li>
  </ul>
</nav>

<!-- Аккордион на второй странице index2.html -->
<div id="accordion" class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title"><a href="#collapse-1" data-parent="#accordion" data-toggle="collapse">Вкладка 1</a></h2>
    </div>
    <div id="collapse-1" class="panel-collapse collapse in">
      <div class="panel-body">
        <p>Текст 1</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title"><a href="#collapse-2" data-parent="#accordion" data-toggle="collapse">Вкладка 2</a></h2>
    </div>
    <div id="collapse-2" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Текст 2</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title"><a href="#collapse-3" data-parent="#accordion" data-toggle="collapse">Вкладка 3</a></h2>
    </div>
    <div id="collapse-3" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Текст 3</p>
      </div>
    </div>
  </div>
</div>

$(function() {
      if (window.location.hash.length > 0) {
        $('a[href="' + window.location.hash + '"]').click();
      }
    }
  • Вопрос задан
  • 1307 просмотров
Пригласить эксперта
Ответы на вопрос 1
@fend
Идея в том, чтобы проверить, подходящий ли хэш и есть ли на странице элемент с id равным хэшу страницы (это довольно удобно - оба они начинаются с одного и того же символа.
PS: код я не тестировал.

$(document).ready(function() {
    if (location.hash.startsWith('#collapse-') && $(location.hash).length !== 0) {
        $(location.hash + ' panel-body').expand();
    }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы