700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html 导航菜单切换效果 纯CSS实现导航栏Tab切换效果

html 导航菜单切换效果 纯CSS实现导航栏Tab切换效果

时间:2021-09-05 14:25:41

相关推荐

html 导航菜单切换效果 纯CSS实现导航栏Tab切换效果

。锚点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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。