Html 如何正确使用目标伪类替换'；主动'；多页导航的状态？_Html_Css

Html 如何正确使用目标伪类替换'；主动'；多页导航的状态？

html css

Html 如何正确使用目标伪类替换'；主动'；多页导航的状态？,html,css,Html,Css,基本上，我在一个大型应用程序中有一个微型站点。我想为页面创建一个活动状态的第三级导航。它的单个html blob被插入到多个页面中理想情况下，我会使用active类突出显示用户在第三级导航中的哪个页面，如下所示 <nav> <ul> <li class="active"><a href="#">Page 1</a></li> <li><a href="#">Page 2<

基本上，我在一个大型应用程序中有一个微型站点。我想为页面创建一个活动状态的第三级导航。它的单个html blob被插入到多个页面中

理想情况下，我会使用

active

类突出显示用户在第三级导航中的哪个页面，如下所示

  <nav>
   <ul>
   <li class="active"><a href="#">Page 1</a></li>
   <li><a href="#">Page 2</a></li>
   <li><a href="#">Page 3</a></li>
   </ul>
  </nav>

而不是

 nav li.active {background:#ccc}

我见过

anchor

标记这样做。问题是，是否有可能对不同的URL执行类似的操作？

：target

类的正确用法是什么

以下是我迄今为止根据评论得出的结论

  <nav>
   <ul>
   <li><a id="page1" href="page1.html">Page 1</a></li>
   <li><a id="page2" href="page2.html">Page 2</a></li>
   <li><a id="page3" href="page3.html">Page 3</a></li>
  </ul>
 </nav>

不能跨多个页面工作

根据上面提供的示例，您尝试使用

target

类的方式是向后的。现在，您要求目标类突出显示所选链接，但伪类根据所选链接突出显示与其关联的内容部分。如果你看，你可以看到它的行动。请注意，单击链接时内容会发生更改，反之亦然

如果希望根据所选的导航链接高亮显示导航链接，则需要使用Jquery动态添加“active”类。希望有帮助

编辑

根据我们的对话，我已经查看了您的代码，并能够帮助修复它

<!DOCTYPE html>
<html>
<style>
.content:target  {
   background: #ccc;
}
</style>
<body>

<nav>
  <ul>
    <li><a href="page1.html#page1">Page 1</a></li>
    <li><a href="page2.html#page2">Page 2</a></li>
    <li><a href="page3.html#page3">Page 3</a></li>
  </ul>
</nav>

<h1>This is Page one</h1>

<div class="content" name="page1" id="page1">This is Page ONE paragraph</div>

</body>
</html>


.内容：目标{
背景：#ccc；
}





这是第一页
这是第一页的段落

当导航链接不需要

ID

时，您将

ID

应用于锚定标记，它们需要将

ID

值作为

\page1

传递到URL中。此外，您的

目标

CSS是内容部分，而不是导航菜单。在其他页面中遵循此设置，它应该会非常有效。

请参阅

某些URI引用资源中的位置。这种URI以带有一个“数字符号”（#），后跟一个锚标识符（称为片段标识符）

带有片段标识符的URI链接到文档，称为目标元素

目标元素可以由

：target

伪类表示。如果文档的URI没有片段标识符，则文档具有没有目标元素

所以你可以用

nav li:目标{
背景：#ccc
}

Hm，问题是

s中的

href

s不能指向相应的

li

s，对吗？这并不是HTML解决的问题，实际上，我可以在

锚定

上激活

类。我还没有构建它，但是测试html不起作用。你是说：目标应该只用于同一页面中的锚定链接吗？不：目标链接可以跨多个页面使用，只要你在页面之间始终使用相同的ID和锚定名称。谢谢但它似乎无法跨多个页面工作。为了进一步帮助您，我必须查看您使用的代码。不确定是否可以在某处创建一个示例。这是我创建的一个git测试——因为fiddle不能进行多页扫描。我希望看看这是否能在多个页面上运行-更新的问题：它不适用于多个页面吗？有什么问题吗？我不知道目标是否可以刷新。这个问题的本质是
<!DOCTYPE html>
<html>
<style>
.content:target  {
   background: #ccc;
}
</style>
<body>

<nav>
  <ul>
    <li><a href="page1.html#page1">Page 1</a></li>
    <li><a href="page2.html#page2">Page 2</a></li>
    <li><a href="page3.html#page3">Page 3</a></li>
  </ul>
</nav>

<h1>This is Page one</h1>

<div class="content" name="page1" id="page1">This is Page ONE paragraph</div>

</body>
</html>