在点击菜单的时候点击它(js,jquery)

时间:2016-06-10 13:28:43

标签: javascript jquery html css strikethrough

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

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

BUT

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

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

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

提前致谢!

3 个答案:

答案 0 :(得分:0)

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

<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

答案 1 :(得分:0)

就像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
});

答案 2 :(得分:0)

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

您的选择是:

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

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