JQuery 添加类到菜单

Question

我将此菜单堆叠在顶部，“Representaciones”部分显示在同一页面上但位于欢迎图像下方。当我点击它时它工作但是如果我刷新页面，类“selected”从“representaciones”中消失并显示在“home”上。我无法让它工作，感谢您的帮助。

<div id="menu">
    <ul>
        <li>
        <a href="index.php" class="selected">HOME</a>
        </li>
       <li>
       <a href="#representaciones">REPRESENTACIONES</a>
       </li>
       <li>
       <a href="productos.html" target="_parent">PRODUCTOS</a>
       </li>
       <li>
       <a href="eventos.html" target="_parent">EVENTOS</a>
       </li>
       <li>
       <a href="contacto.php" target="_parent">CONTACTO</a>
       </li>
   </ul>
</div>

CSS

#menu{
padding-left:225px;
margin: 0 auto;
position:absolute;  
width:900px;
height:142px;
background-color:#f6f6f6;
}

#menu ul li a {
    text-align:center;
    float:left;
    list-style: none outside none;
    font-weight:200;
    color: #919ca1;
    font-size:20px;
    text-decoration:none;
    padding-top:60px;
}

#menu ul li a:hover{
    color: #f6f6f6;
    background-color:#d3242c;
    padding: 61px 40px 61px 40px;
}

#menu ul li a.selected{
    color: #f6f6f6;
    background-color:#d3242c;
    padding: 61px 40px 61px 40px;
}

我在这个网站上找到的 jquery

$(document).ready(function () {
    $('#menu li a').click(function () {
        $('#Menu ul li a').removeClass('selected');
        $(this).addClass('selected');
    });
});

Answer 1

我认为这就是浏览器的工作方式。如果您刷新页面，它将恢复到初始状态。

您需要将其状态存储在 cookie 或本地存储中，并在页面加载后获取该状态并重新选择所需的元素。