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

Question

所以我试图有一个可以读取和读取的通知徽章（基于网络），我不知道这是什么是正确的术语，但想象一下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>

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();
});