Question

不确定这是否可行。

尝试将属性选择器动态设置为当前目标（不使用任何JavaScript）。

像这样的css：

.tab[href=#:target] {
  // styles here for active anchor tag
}

html（在Jade语法中）是：

.tab-group
  a.tab(href="#tabA") Tab A
  a.tab(href="#tabB") Tab B
  a.tab(href="#tabC") Tab C

#tabA.target
.tab-content
  h2 Tab A
#tabB.target
.tab-content
  h2 Tab B
#tabC.target
.tab-content
  h2 Tab C

换句话说：如何选择设置当前主题标签的锚链接（使用纯CSS，不使用JS）。

为什么呢？对于使用:target伪选择器方法的仅CSS选项卡，可以实现最灵活的html结构。

Answer 1

这里有两种不同的元素类型与URL中的片段标识符相关：URL指向的锚元素（与URL中的哈希具有相同id的那个），并且有链接指向与当前URL相同的URL。

:target选择锚元素。为了选择链接，您必须使用Javascript来获取URL，然后使用某种选择器，如$=#YOURHASH (ends with)

如果您事先知道选项卡，则可以创建如下的CSS规则：

.tabSomething .content a[href$=#Something] {
  // style for the links that lead to tab Something, because you know the hash is #Something for that tab
}

将CSS Atribute Selector设置为：target

1 个答案: