反应精确路径突出显示 - CSS

在这个主题中，我将向您介绍如何使用 CSS 来突出显示网站中的当前路径或活动页面的路径。

如何实现

要实现此功能，我们可以使用 CSS 中的伪类 ::before。该伪类可以在元素的内容之前插入新的内容。

我们可以使用这个伪类来实现以下步骤：

1. 获取当前页面的路径。
2. 将路径分解为其组成部分。
3. 遍历这些部分，为每个部分创建一个新的元素并使用 ::before 添加一个文本内容。
4. 将这些新元素添加到文档中，以突出显示路径。

例如，假设我们当前的 URL 为 https://demo.com/home/projects/inbox。我们将获取此 URL 并将其分解为「主页」、「项目」和「收件箱」。我们将为每个部分创建一个新元素和文本内容，在元素的 ::before 上添加样式。最后，我们将把这些新元素添加到文档中。

代码示例

以下是实现反应精确路径突出显示的示例代码：

/* 获取当前 URL */
var url = window.location.href;

/* 分解路径 */
var path = url.split('/');

/* 删除第一个和最后一个元素（协议和主机） */
path.shift();
path.splice(-1, 1);

/* 创建并添加新元素到文档中 */
var current = '';
path.forEach(function(item, index) {
  var section = document.createElement('div');
  var title = document.createElement('div');
  var link = document.createElement('a');
  if(index === path.length - 1) {
    title.innerText = item;
    link.innerText = '»';
    link.href = '#';
    link.onclick = function() {
      return false;
    };
  } else {
    title.innerText = item;
    link.innerText = '/';
    link.href = '/'+path.slice(0, index+1).join('/')+'/';
  }
  section.appendChild(title);
  section.appendChild(link);
  current += '/'+item;
  section.classList.add('path-section');
  if(current === url) {
    section.classList.add('active-section');
  }
  document.getElementById('breadcrumb').appendChild(section);
});

CSS 样式

以下是与示例代码一起使用的 CSS 样式：

.path-section {
  display: inline-block;
  margin-right: 10px;
  color: #555;
  font-size: 14px;
}

.active-section {
  font-weight: bold;
  color: #000;
}

.path-section a {
  text-decoration: none;
  color: #555;
  font-size: 14px;
}

.path-section a:hover {
  color: #000;
}

.path-section a:visited {
  color: #555;
}

.path-section:last-child a {
  display: none;
}

结论

现在，您已经知道了如何使用 CSS 来创建反应精确路径突出显示。使用这个功能可以帮助用户更好地了解他们的位置和页面之间的关系，提供更好的用户体验。把这个功能添加到你的网站中，让你的用户更加方便。