我的侧边栏菜单能够展开并显示一个部分的子部分,如下所示。open部分具有open active
类,单击的链接具有active
类。
我的所有链接都有一个不同的#url
。所以这将决定类。
如何根据打开的链接自动放置open active
和active
类?我也可以使用PHP。
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
<a href="page.php#first1">First Section 1</a>
<span class="icon-thumbnail">au</span>
</li>
<li class="">
<a href="page.php#first2">First Section 2</a>
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
<a href="secondpage.php#second1">Second Section 1</a>
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
这样尝试:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
<a href="page.php#first1">First Section 1</a>
<span class="icon-thumbnail">au</span>
</li>
<li class="">
<a href="page.php#first2">First Section 2</a>
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
<a href="secondpage.php#second1">Second Section 1</a>
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});