HTML目录怎么把点去掉
在HTML中，目录(Table of Contents)通常是一个无序列表(ul或ol),其中的每个列表项(li)表示一个页面中的标题，有时，我们希望在目录中去掉点(.),使得目录更加美观，本文将介绍如何使用CSS和HTML来实现这个需求。
1、使用CSS隐藏点
方法一：为标题添加类名
我们可以在HTML文档的<head>部分添加一个CSS样式，为所有的标题添加一个类名，例如.no-dot，在CSS中设置.no-dot::before伪元素的内容为空，并将其宽度和高度设置为0,以达到隐藏点的目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.no-dot::before {
content: "";
display: block;
width: 0;
height: 0;
}
</style>
</head>
<body>
<h1 class="no-dot">一级标题</h1>
<h2 class="no-dot">二级标题</h2>
<h3 class="no-dot">三级标题</h3>
<!-其他标题 -->
</body>
</html>
方法二：使用JavaScript动态修改内容
我们还可以使用JavaScript来动态修改目录中标题的内容，从而达到去除点的目的，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.no-dot {
text-decoration: none; /* 移除默认的点 */
}
</style>
</head>
<body>
<h1 class="no-dot">一级标题</h1>
<h2 class="no-dot">二级标题</h2>
<h3 class="no-dot">三级标题</h3>
<!-其他标题 -->
</body>
<script>
var headings = document.querySelectorAll('h1, h2, h3'); // 获取所有标题元素
for (var i = 0; i < headings.length; i++) {
headings[i].innerHTML = headings[i].innerText + '.'; // 在原有内容后添加一个点，并替换原有内容
};
</script>
</html>
2、使用HTML标签属性隐藏点(不推荐)
虽然这种方法可以实现需求，但并不推荐使用，因为它会破坏HTML的结构和语义，使得代码难以阅读和维护，如果有其他开发者查看你的代码，他们可能会因为无法理解这种做法而感到困惑，请尽量避免使用这种方法。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/224740.html
微信扫一扫 