Question

请在用户点击后隐藏徽章通知图标隐藏，并在导航时隐藏所有页面。这是我的代码

<h:outputLink value="" id="but" class="closebtn" onclick="closeNav()" style="border-bottom:none">x</h:outputLink>
        <h:outputLink value="home.xhtml" id="ab" onclick="closeNav()"><span class="glyphicon glyphicon-home" style=" color: blue;"></span><span id="ab1">Home</span></h:outputLink>     
        <h:outputLink value="profile.xhtml" id="ser" onclick="closeNav()"><span class="glyphicon glyphicon-user custom"></span><span id="ser1">Profile</span></h:outputLink>
        <h:outputLink value="transaction.xhtml" id="cl" onclick="closeNav()"><span class="glyphicon glyphicon-briefcase"></span><span class="badge badge-notify">!</span><span id="cl1">Transaction</span></h:outputLink>

这是我的css：

.badge-notify
    {
        background:red;
        position:absolute;

  }

这是我的javascript：

 $(document).ready(function()
{
  $(".badge-notify").click(function()
   {
       $(".badge-notify").fadeOut("slow");
   });
});

Answer 1

它始终显示在每个页面上的原因是因为您没有跟踪它之前是否被点击过。

一种解决方案是默认情况下将徽章的显示设置为无，如下所示：

.badge-notify {
    display: none;
    background:red;
    position:absolute;
}

并在其localStorage中保存一个变量，看看他们之前是否点击了徽章。所以，如果我们做类似的事情：

localStorage.setItem("seen_badge", "false");

然后我们创建了一个变量，现在可以在您网站的所有页面上使用。因此，使用一些jQuery，我们检查用户之前是否看过徽章，如果没有，我们会将其显示为：

if(localStorage.seen_badge === "false") {
    $('.badge-notify').show();
}

接下来，如果用户点击徽章来关闭/关闭它，我们会将seen_badge的值更改为true，这样就不会再次显示：

$('.badge-notify').on('click', function() {
    $(this).hide();
    localStorage.seen_badge = "true";
});

如何使徽章通知在单击后在所有网页上消失

1 个答案: