1

也许标题不能描述我的问题，但在这里我会提供更多细节。

所以，我有这个网站，其中菜单是一个列表，每个列表项都是指向不同页面的锚 ()。到目前为止，当我将鼠标悬停在 li 上时，它可以将文本的属性更改为删除线（使用 css：text-decoration:line-through）。

但

我怎样才能使它在我单击菜单项之一后单击的项目（即时页面）将保持删除线效果？

例如，我在“主页”上，当我移至“预订”时，它在菜单中的名称被删除，“主页”清除删除线效果，“预订”获得删除线效果？

我希望我清楚我在寻找什么，有人可以帮助我解决这个问题！

提前致谢！

4

2 回答 2

0

生成页面时，您可以知道哪个菜单项应该被“删除”，因此您添加具有文本装饰的类。

<div>
    <ul>
        <li class="selected"><a href="home.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        ....
    </ul>
</div>

在 CSS 中：

li.selected a { text-decoration:line-through; }

为了在不重新渲染页面的情况下更改它，您必须使用 Javascript：

$("li").click(function(event){
  $("li").removeClass("selected");
    $(this).addClass("selected");
});

JSfiffle 示例

于 2016-06-10T13:38:15.597 回答
0

就像 DaniP 评论你的问题一样，你应该在 CSS 类的帮助下做到这一点。

例如：单击菜单项时，从所有菜单项元素中删除 CSS 类（例如“活动”），仅将其添加到单击的元素中。CSS 类应该定义删除线效果。

设置事件处理程序：

$('li a.menuItem').click(function(event) {
    $('li a.menuItem').removeClass('active'); // remove class from all menu items
    $(this).addClass('active'); // add active class to clicked menu item
});
于 2016-06-10T13:38:51.347 回答