我在这里使用jQuery UI进行侧边栏导航:http://www.imadesign.com/dev/work/
我希望能够使手风琴在当前活动部分保持打开状态。因此,例如,如果我在此页面上:http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency,则基础结构手风琴将保持打开状态。
这是html:
<div id="accordion">
<div>
<h3><a href="#">Infrastructure</a></h3>
<div>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/green_valley_ranch">Green Valley Ranch</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/irvine_spectrum">Irvine Spectrum</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/lynwood">Lynwood</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/inland_empire_utilities_agency">Inland Empire Utilities Agency</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/center_for_regenerative_studies">Center for Regenerative Studies</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/agriscapes">Agriscapes</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/sepulveda_basin_wildlife_area">Sepulveda Basin Wildlife Area</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/upper_newport_bay_regional_park">Upper Newport Bay Regional Park</a></p>
<p><a href="http://www.imadesign.com/dev/work/infrastructure/los_angeles_world_airports">Los Angeles World Airports</a></p>
</div>
</div>
<div>...
这是jQuery:
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3", autoHeight: false, collapsible: true, active:false });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover');
});
});
</script>
任何指导将不胜感激。谢谢。
最佳答案
您可以查看URL是否出现在任何链接的href中,然后显示相应的div
它并不完美,但至少是通用的,您可以根据需要进行修改...
我做了一个小提琴:
http://jsfiddle.net/TKgsQ/1/
编辑:
这是初始化手风琴后必须放在$(function(){});中的代码
var arr = window.location.toString().split('/');
var currentUrl = arr[arr.length -1];
$("#accordion a").each(function(){
arr = $(this).attr("href").split("/");
var linkUrl = arr[arr.length -1]; //get last part
if(linkUrl == currentUrl)
$(this).css('background-color','yellow').closest('div').show();
});