如何在通知菜单中自动添加通知计数

Question

我想在收到新通知时在通知选项卡中显示通知计数。就像这张照片。请指导我。如果您知道 html 和 css 代码，请提供帮助。谢谢你们。祝你愉快。

如果我添加这段代码

<span class="badge" style="background-color: #f0ad4e">1</span></a></li>

在导航栏之后安抚。但它每次都会显示有或没有新通知。有办法解决这个问题吗？

这是代码

<li  class="active" ><a href="/notification"> Notification <span class="badge" style="background-color: #f0ad4e">1</span></a></li>

徽章css

    .nav-bottom .nav .dropdown li a .badge {
        position: absolute;
        right: 8px;
        top: 13px;
        padding: 3px 7px;
        font-size: 10px;
    }

Answer 1

我不知道您选择如何更新通知计数，所以我只是为您提供了一种非常基本的更新通知的方法。您可以使用一个简单的 JavaScript DOM 脚本来执行某些操作，您可以在其中触发 notificationCounter() 函数。我也更新了您的 HTML 代码（见下文）。请务必将其包含到 .js 文件中并将其加载到 HTML 文档的页脚中。

Javascript:

function notificationCounter() {
    counter += 1;
    document.getElementById("NotificationBadge").innerHTML = counter;
}

const counter = 0;

HTML:

...
<li  class="active" ><a href="/notification"> Notification <span id="NotificationBadge" class="badge" style="background-color: #f0ad4e">1</span></a></li>
...

CSS: 保持原样。

如何在通知菜单中自动添加通知计数

How to add notification count in notification menu automatically

css

ajax

notifications

json

push-notification