0

Есть на первой странице меню, а на второй связанной в рамках одного сайта аккордеон. Как сделать так, чтобы по клику пункта меню открывалась страница с соответствующей раскрытой вкладкой? Вот так-то якорь передает и на страницу-то переходит, но вкладку соответствующую не открывает..

$(function() {
      if (window.location.hash.length > 0) {
        $('a[href="' + window.location.hash + '"]').click();
      }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

1 ответ 1

1

Самым простым способом будет добавить аналогичный клик по элементу, который раскроет нужную часть аккордеона:

$(function() {
  if (window.location.hash.length > 0) {
    var a = 'a[href="' + window.location.hash + '"]';
    $(a).click();
    $('#accordion ' + a).click();
  }
}
1
  • Супер! только я еще дополню в свою очередь проверку if (location.hash.startsWith('#collapse-') && window.location.hash.length > 0) {} ну и ); в конце конечно же)
    – Вася
    8 янв 2016 в 21:12

Ваш ответ

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

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