。锚点2与之相同对应列表2。
接下来,我们就可以使用 :target 接受到点击事件,并操作对应的 DOM 了:
CSS Code复制内容到剪贴板
"font-family:verdana,geneva;">#content1,
#content2{
display:none;
}
#content1:target,
#content2:target{
display:block;
}
上面的 CSS 代码,一开始页面中的 #content1 与 #content2 都是隐藏的,当点击列表1触发href="#content1" 时,页面的 URL 会发生变化:
由 变成 #content1
接下来会触发 #content1:target{ } 这条 CSS 规则,#content1 元素由 display:none 变成display:block ,点击列表2亦是如此。
如此即达到了 Tab 切换。当然除了 content1 content2 的切换,我们的 li 元素样式也要不断变化,这个时候,就需要我们在 DOM 结构布局的时候多留心,在 #content1:target 触发的时候可以同时去修改 li 的样式。
在上面 HTML 的基础上,再修改一下,变成如下结构:
CSS Code复制内容到剪贴板
"font-family:verdana,geneva;">
"content1