Para obtener el acordeón para abrir automáticamente la sección correcta en función de la dirección URL, deberá empezar desde activando la opción navigation con algo como:
$('#accordion').accordion('option', 'navigation', true);
por defecto, esta opción busca el enlace de cabecera de acordeón que tiene un href que coincide con la URL Fragme nt (si su URL es http://somesite.com/about#contact, #contact es el fragmento) y abre esa sección del enlace del encabezado. Dado que está utilizando el acordeón para desplazarse a diferentes páginas, es probable que no tienen fragmentos de URL a contrastar, por lo que tendrá que escribir una costumbre navigationFilter:
$('#accordion').accordion('option', 'navigationFilter', function(){ ... });
Usted puede utilizar la opción de navigationFilter anula cómo el complemento de acordeón coincide con los enlaces de encabezado a la URL de la página actual.
Hasta ahora, tenemos la sección correcta del acordeón para abrir en función de la página actual. A continuación, debemos resaltar el enlace en esa sección que corresponde a la página. Que va a hacer que con algo como:
<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>
Aquí vamos a través de todos los enlaces de la página en el acordeón de navegación, recogiendo la que coincida con la URL actual, y la aplicación de una clase .active a ella, que le luego puede tener un estilo diferente con CSS.
Un aparte: otra, probablemente mejor, manera de lograr la segunda parte es la construcción de la página con la clase .active ya aplicada al enlace correspondiente, pero que se supone que tiene el control sobre el backend y que sabes cómo hacerlo. De hecho, si ese es el caso, puede omitir todo el asunto navigationFilter y generar un bloque <script> para establecer la opción active en el acordeón para abrir la sección derecha.
Si seleccionó el método de cambio de hash que se describe aquí, el siguiente complemento no tiene comparación: http://benalman.com/projects/jquery-bbq-plugin/ - pronto reemplazará el plugin de jQuery history, que está terriblemente anticuado. –
@Alex - ¡agradable! no estaba enterado de eso. – Matt
Gracias por la información. Veré si puedo hacer que funcione con su solución o con la de No Surprises (arriba) ¡con los dedos cruzados! – MelissaTA