<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Tag Article Count Display</title> <style> body { fontfamily: Arial, sansserif; } .tagcontainer { marginbottom: 20px; } .tag { marginright: 10px; padding: 5px 10px; backgroundcolor: #f0f0f0; borderradius: 5px; cursor: pointer; } .count { fontweight: bold; } </style> </head> <body> <div id="tagscontainer"></div> <script> // 假设这是从服务器获取的标签和文章数量的数据 const tagsData = [ { tag: "织梦", count: 5 }, { tag: "标签", count: 3 }, { tag: "文章", count: 8 }, { tag: "显示", count: 2 }, { tag: "数量", count: 1 } ]; // 渲染标签和文章数量 function renderTags() { const container = document.getElementById('tagscontainer'); container.innerHTML = ''; // 清空容器内容 tagsData.forEach(tag => { const tagElement = document.createElement('span'); tagElement.className = 'tag'; tagElement.textContent =${tag.tag} (${tag.count})
; tagElement.onclick = function() { // 这里可以添加点击事件的处理逻辑,例如跳转到相关文章页面 console.log(Clicked on ${tag.tag} with ${tag.count} articles.
); }; container.appendChild(tagElement); }); } // 初始化页面 window.onload = renderTags; </script> </body> </html>
代码是一个简单的HTML页面,其中包含了JavaScript,用于显示每个标签及其对应的文章数量,页面加载时,会从tagsData
数组中获取数据并渲染到页面上,每个标签都是一个可点击的元素,点击后可以在控制台中看到相应的日志输出,这里使用了内联样式来简单美化页面,实际应用中可能需要更复杂的样式和布局。
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1141323.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复