[英]How to apply classes based on the open linked?
My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. 我的侧边栏菜单具有展开和显示部分内容的功能,如下所示。 The open section has the
open active
class and the clicked link has the active
class. 打开部分具有
open active
类别,单击的链接具有active
类别。
All of my links has a different #url
.So this will determine the classes. 我所有的链接都有一个不同的
#url
。因此将确定类。
How can I automatically place the open active
and active
classes based on the opened link? 如何根据打开的链接自动放置
open active
active
类和active
类? I can also use PHP. 我也可以使用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>
Try like this: 尝试这样:
HTML: 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: 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');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.