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

Unread/Read Notification Badges in webpage

本文关键字：通知徽章网页更新时间：2023-09-26

我尝试有一个通知徽章(基于web的)可以阅读和取消阅读，我不知道这个术语是什么，但想象一下facebook通知，当你有3个通知时，它会显示3个徽章。这里是网站，这样你可以更好地理解http://getbootstrap.com/components/#badges。我需要的是，如果我点击某个按钮，通知徽章将消失。

这是我的按钮代码

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

这是我的代码与通知徽章，我们不要尝试运行它，因为你可以看到引导设计:(

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

由于您正在使用bootstrap，而bootstrap插件需要jquery，我将假设您也在使用jquery

你应该首先给视图通知按钮和通知徽章一个id，除非页面上只有一个按钮和一个徽章。

然后你可以简单地注册一个事件处理程序，当有人点击你的按钮隐藏徽章。

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