我真的希望我不是在重复一个老问题 - 我是选择器的新手,所以我的术语可能会有所欠缺。
我正在基于此 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 并更改了显示的内容。有什么建议吗?
最佳答案
: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>
关于html - 使用单页导航突出显示事件选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42016866/