如何在我的网页上添加交互式通知徽章？

Question

我目前正在网站上工作，我想添加一个“新闻”部分，当有新文章时，它会显示Apple风格的通知徽章。在用户点击“新闻”按钮后，如何使徽章消失，并保持隐藏状态？

Answer 1

准确回答你的问题：

<强> HTML

<ul>
    <li><a href="#news" class="nav">News</a><span class="badge">2</a></li>
</ul>

Javascript（需要jQuery）

$('.nav').on('click', function(){
    $('.badge').hide()
})

它会保持隐藏状态。 ：）