根据所选页面更改 li 元素的背景颜色

Question

我想知道如何在选择子元素时更改锚元素的背景颜色。

例如，如果我有一个导航在哪里

<ul>
    <li><a>home</a></li>
    <li class="has-dropdown"> 
        <a href="somewhere.html"> parent </a>
        <ul>
            <li class="clickedthis has-dropdown"><a href="something.html">list 1</a>
                <ul>
                    <li class="clickedthis"><a href="something.html">list 1</a></li>
                    <li>list 4</li>
                    <li>list 5</li>
                </ul>
            </li>
            <li>list 2</li>
            <li>list 3</li>
        </ul>
    </li>
</ul>

我点击了第一个链接，我希望它在下一页加载时更改父级的背景颜色。

所以无论当前页面是什么，该锚元素的父元素都会设置背景色。

---

例如the dnn site

如果我从导航转到其中一个子页面，则父元素变为蓝色

Answer 1

基本思想是将一个类应用于您要更改的元素，例如.selected，它设置背景颜色。

由于您的 href 值似乎指向静态 .html 文件，因此只需在每个文件中的适当 <li> 上设置该类即可。

但是，如果您使用有条件地应用类的后端技术，则有更好的管理状态的方法，最好是标记的共享标头 sn-p，具体取决于所服务的页面或路由。