根据所选页面更改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>上设置该类。

但是，如果您使用有条件地应用类的后端技术，最好使用后端技术来管理状态，最好是标记的共享标题片段，具体取决于所服务的页面或路由。