Чтобы аккордеон автоматически открывал правильный раздел на основе URL, вы начнете с включения опции navigation с чем-то вроде:
$('#accordion').accordion('option', 'navigation', true);
По умолчанию эта опция ищет ссылку заголовка аккордеона, которая имеет href, который соответствует фрагменту URL (если ваш URL равен http://somesite.com/about#contact, #contact - это фрагмент), и открывает раздел ссылки этого заголовка. Поскольку вы используете аккордеон для перехода на разные страницы, у вас, вероятно, не будет фрагментов URL для сравнения, поэтому вам придется написать пользовательский navigationFilter:
$('#accordion').accordion('option', 'navigationFilter', function(){ ... });
Вы можете использовать опцию navigationFilter, чтобы переопределить, как плагин accordion сопоставляет ссылки заголовка с URL текущей страницы.
Пока у нас есть правильный раздел аккордеона, который можно открыть на основе текущей страницы. Далее нам нужно выделить ссылку в этом разделе, которая соответствует странице. Вы сделаете это с чем-то вроде:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion li').each(function() {
var li = $(this);
var a = $('a', li);
if(/* compare the href of the 'a' element to the current URL */) {
li.addClass('active');
}
});
});
</script>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<ul>
<li><a href="/help">Help</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
</div>
</div>
Здесь мы просматриваем все ссылки на страницы в навигационном аккордеоне, выбираем ту, которая соответствует текущему URL, и применяем к ней класс .active, который затем можно стилизовать по-разному с помощью CSS.
Кроме того: другой, возможно, лучший способ выполнить вторую часть - это создать страницу с классом .active, уже примененным к соответствующей ссылке, но это предполагает, что у вас есть контроль над бэкэндом и что ты знаешь как это сделать. Фактически, если это так, вы можете пропустить целую вещь navigationFilter и сгенерировать блок <script>, чтобы установить опцию active на аккордеоне, чтобы открыть правую часть.