使用单页导航突出显示活动选项卡答案

【问题标题】：Highlighting active tab with single page navigation使用单页导航突出显示活动选项卡
【发布时间】：2017-02-03 14:36:10
【问题描述】：

我真的希望我不是在重复一个老问题 - 我是选择器的新手，所以我的术语可能会有所欠缺。

我正在开发一个基于此Default :target with CSS 解决方案的选项卡式单页网页。我希望当前选项卡的链接以某种方式突出显示或更改，以指示当前位置。

HTML：

<ul id="tabnav">
    <li><a href="#tab1" class="tab1">Tab 1</a></li>
    <li><a href="#tab2" class="tab2">Tab 2</a></li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>

<div class="tab tab1 default-tab">This is text you should see as you load the page</div>
<div class="tab tab2">This is text that will appear after you click on tab 2</div>

CSS：

.tab {
    display:none
}
.default-tab {
    display:block
}

:target ~ .default-tab {display:none}

#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
    display: block
}

ul#tabnav a:hover { 
    background: red;
}

ul#tabnav a:target{
    border-width: thick;
    border-color: black;
}

似乎我的最后一个元素 (a:target) 没有做任何事情，即使单击选项卡确实将我带到了新的锚点并更改了显示的内容。有什么建议吗？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

:target 是页面上的元素的选择器，该元素的 URL 中的锚名称为 id 或 name。所以ul#tabnav a:target 不会匹配任何东西，但是如果您将选择器更改为a:target，它将为页面中间的两个链接设置样式，<a id="tab1"></a><a id="tab2"></a>

要在导航中设置“活动”链接的样式，您需要使用 javascript 在点击时添加一个类，然后设置该类的样式。

var $links = $('#tabnav a');
$links.on('click',function(e) {
  e.preventDefault();
  $links.removeClass('active');
  $(this).addClass('active');
})

.tab {display:none}
.default-tab {display:block}

:target ~ .default-tab {display:none}

#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
  display: block
}

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="tabnav">
        <li><a href="#tab1" class="tab1">Tab 1</a></li>
        <li><a href="#tab2" class="tab2">Tab 2</a></li>
    </ul>
    <a id="tab1"></a>
    <a id="tab2"></a>

    <div class="tab tab1 default-tab">
        This is text you should see as you load the page
    </div>
    <div class="tab tab2">
        This is text that will appear after you click on tab 2
    </div>

【讨论】：

嗨迈克尔，谢谢您的回复。关于 ids & :target 的信息对我来说是新闻！我一直在尝试在这项工作中使用最少的 jquery/javascript（也许是愚蠢的）。我怀疑可能有一个无脚本的解决方案（例如css-tricks.com/examples/CSSTabs 示例 6），但是缺少默认的“选项卡”很麻烦。
@K.D.Mortimer 是的，这是可能的，但不是你的标记。我正在使用您提供的标记。所有这些解决方案都是 hacky - 我看不出你可以编写几行 javascript 来使其干净。这些东西正在控制页面的状态——CSS 做得不好，或者根本没有。 CSS 仅用于设计。 Javascript 是操作页面状态的标准，CSS 与之配对以反映页面状态的设计。

【解决方案2】：

您可以使用引导选项卡，它会解决您的问题并且工作正常。

请查看演示here

希望这能解决你的问题。

快乐编码:)

【讨论】：