如何基于打开的链接应用类 - How to apply classes based on the open linked?

How to apply classes based on the open linked?

本文关键字：链接应用何基于 | 更新日期: 2023-09-27

我的侧边栏菜单能够展开并显示一个部分的子部分，如下所示。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');
    }
});