html - 使用单页导航突出显示事件选项卡

Question

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

我正在基于此 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) 似乎没有做任何事情，即使单击选项卡确实将我带到新的 anchor 并更改了显示的内容。有什么建议吗？

Answer 1

:target是页面上具有 id 的元素的选择器或 name URL 中的 anchor 名称。所以ul#tabnav a:target不会匹配任何东西，但是如果您将选择器更改为 a:target , 它将设置页面中间的 2 个链接的样式，<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>