Question

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

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

BUT

如何点击其中一个菜单项后点击的项目（页面即时）将保留删除线效果？

例如，即时通讯'主页'及其在菜单中的名称是当我转到'预订'时，'主页'清除了删除线效果，'预订'获得了删除线实现

我希望我明确表示我在寻找什么，有人可以帮我解决这个问题！

提前致谢！

Answer 1

生成页面时，您可以告诉哪个菜单项应该是＆＃34; strikethroughed＆＃34;，因此您添加了具有文本修饰的类。

<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 Example

Answer 2

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

例如：单击e菜单项时，从所有菜单项元素中删除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
});

Answer 3

其他评论已经提到了如何通过课程进行攻击，但从我收集的内容中你想要某种状态的存储？

您的选择是：

平面文件存储（CSV，JSON）;
数据库存储（SQLlite，mongoDB，MySQL）;
缓存; （可能更好小解决方案的选项）

前两个可以通过生成和保存会话ID来实现。同时还保存已点击的状态。

在点击菜单的时候点击它（js，jquery）

3 个答案: