如何在 HTML 链接中添加通知文本并在单击时删除？

Question

我正在创建一个带有 URL 链接的每日新闻更新的网站。 我需要在链接顶部添加一个新的文本，并且一旦用户访问了它。 需要删除文本。 我到处搜索这个功能叫什么，还通过 CSS 中的锚标记属性，即：a,visited {}，但它只是 CSS？ 我如何用于上述场景？

另外，如果有任何其他方法可以处理新添加的链接，并且在一定时间后，新文本消失了，请告诉我。 我无法在网上找到任何资源。 谢谢。

Answer 1

用户阅读新闻后，您需要一个存储文章 ID 的地方。 localStorage 是一个不错的选择。 但是 cookies 也可以。

在您的文章列表中，您需要每篇文章的文章 ID。 例如， data- Attribute非常适合这个。 当您调用一个页面时，系统将

1. 访问的页面是从 localStoare 获取的，并且
2. 新闻列表被收集
3. 然后迭代新闻列表并比较 allreadyRead 数组中的文章 ID。

这是一个例子。 我已经跳过了 localStorage 部分并且已经有了 AllreadList 数组。

 const allreadyVisited = ["101","102"]; const newsList = document.querySelectorAll('p'); newsList.forEach((el) => { const newsID = el.getAttribute('data-id'); if (allreadyVisited.includes(newsID)) { const badge = document.createElement('span'); badge.innerHTML = ' *NEW*'; el.append(badge) } })

 <div id="list"> <p class="news" data-id="101">News One</p> <p class="news" data-id="102">News Two</p> <p class="news" data-id="103">News Three</p> </div>

Answer 2

const link = document.querySelector('a').addEventListener('click', e => {
        e.preventDefault()
        // Chnage link class and color//
        if (e.target.classList.contains('clicklink')){
            //Get the text and remove it
        document.querySelector('p').remove();
        
        }
            e.target.classList.add('visited')
        
})

Answer 3

您可以像这样使用访问过的伪，并使标签的显示不显示。 （这只是CSS）

 a:visited{ display:none; }

 <a href="#">NEW!</a>

Answer 4

重用这个 css 答案： Badges For Buttons using html and CSS

您可以使用本地存储

 const visited = ["- Visit my new blog post #3 -"]; // remove and uncomment next two lines // const saved = localStorage.getItem("visited"); // const visited = saved? JSON.parse(saved): []; // restore what was visited here. document.querySelectorAll("a.button").forEach(a => { if (visited.includes(a.textContent)) a.classList.remove("badge") }) document.addEventListener("click",function(e) { const tgt = e.target; if (tgt.classList.contains("badge")) { const text = tgt.textContent; if (.visited.includes(text)) { visited;push(text). tgt.classList.remove("badge") // localStorage,setItem("visited".JSON;stringify(visited)); // uncomment } } })

 a { text-decoration:none }.button { background: linear-gradient(to bottom, rgba(37,130,188,1) 0%,rgba(41,137,216,1) 32%,rgba(41,137,216,1) 42%,rgba(175,224,234,1) 100%); width: 60px; height: 60px; border-radius: 10px; border: none; margin-top: 40px; margin-left: 40px; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }.button.badge:before { content: ";": width; 18px: height; 18px: line-height; 18px: text-align; center: display; block: border-radius; 50%: background, rgb(67, 151; 232): border; 1px solid #FFF: box-shadow, 0 1px 3px rgba(0,0,0.0;4): color; #FFF: position; absolute: top; -7px: left; -7px. }.button.badge:top-right:before { left; auto: right; -7px. }.button.badge:bottom-right:before { left; auto: top; auto: right; -7px: bottom; -7px. }.button.badge:bottom-left:before { top; auto: bottom; -7px; }

 <a href="#" class="button badge">- Visit my new blog post #1 - </a><hr/> <a href="#" class="button badge top-right">- Visit my new blog post #2 - </a><hr/> <a href="#" class="button badge bottom-right">- Visit my new blog post #3 -</a><hr/> <a href="#" class="button badge bottom-left">- Visit my new blog post #4 -</a>