Question

我将此菜单叠加在顶部，“Representaciones”部分显示在同一页面上但在欢迎图片下方。当我clic它工作，但如果我刷新页面，“选择”类从“representaciones”消失，它显示在“家”。感谢你的帮助，我无法让它发挥作用。

<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

您需要将ctMenu更改为menu

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

FIDDLE DEMO

Answer 2

试试这个

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

Answer 3

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

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

JQuery addClass到菜单

3 个答案: