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）没有做任何事情，即使点击标签确实会带我到新的锚点并更改显示的内容。有什么建议吗？

Answer 1

:target是页面上元素的选择器，其中URL中包含id或name锚名称。因此，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>

Answer 2

您可以使用引导标签来解决问题，并且工作正常。

请查看演示here

希望这能解决你的问题。

快乐编码：）

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

2 个答案: