javascript - 网页中的未读/已读通知徽章

Question

所以我正在尝试有一个可以读取和未读的通知徽章(基于网络)，我不知道什么是正确的术语，但想象一下 facebook 通知，当你有 3 个通知时，它会显示 3 个徽章。好吧，这是该站点，因此您可以更好地理解http://getbootstrap.com/components/#badges .我需要的是，如果我点击某个按钮，通知标志就会消失。

这是我的按钮代码

<a class='btn btn-default btn-xs' href='#' role='button'>View Notification</a>

这是我的带有通知徽章的代码，不要尝试运行它，因为您可以看到 Bootstrap 设计:(

<a href="index.php?cat=notifications" >Notifications<span class="badge">1</span></a>

Answer 1

由于您使用的是 Bootstrap ，并且 Bootstrap 插件需要 jquery , 我假设你也在使用 jquery .

---

您应该首先为“查看通知”按钮和通知徽章指定一个 id，除非页面上只有一个按钮和一个徽章。

Then you can simply register an event handler for when someone clicks your button to hide the badge.

$('#view-notification').click(function() {
    $('#notification-badge').hide();
});