网页设计

CSS3实现选项卡切换的方法

时间:2024-08-05 00:45:27 网页设计 我要投稿
  • 相关推荐

CSS3实现选项卡切换的方法

  导语:在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。以下的是YJBYS生小编为大家搜集的使用CSS3实现选项卡切换的方法,欢迎阅读参考。

  :target是什么?

  MDN是这样描述的::target

  The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

  在document中,可以设置锚链接,举个例子:

  CSS Code复制内容到剪贴板

  Test :target

  Test 2:target 

This is a tab.  
This is another tab.

  上面存在两个锚链接:#tab和t#ab2。当点击锚链接时,就会跳到对应的div,则::target就是给这些div用的。添加一下CSS

  CSS Code复制内容到剪贴板

  :target{

  color:red;

  }

  #tab:target::after{

  content:"tab1"

  }

  点击锚链接,对应链接的div的文本变成红色,另外,给#tab后面插入一个文本。

  效果猛戳:https://jsfiddle.net/dwqs/cL8rawov/

  应该大致明白了:target的含义了吧~

  :target可以做什么

  最简单的用处:利用:target实现选项卡切换。

  HTML:

  XML/HTML Code复制内容到剪贴板

  tab1

  tab2

  tab3

This is a tab1  

This is a tab2  
This is a tab3  

  CSS:

  CSS Code复制内容到剪贴板

  .tab-control a{

  display:inline-block;

  text-decoration:none;

  color:#FFF;

  height:20px;

  width:40px;

  text-align:center;

  line-height:20px;

  background:rgba(70,121,189,0.75);

  }

  .tab-control a:hover{

  background:rgba(70,121,189,1);

  }

  .tabs{

  position:relative;

  border:1px solid red;

  height:200px;

  width:135px;

  overflow:hidden;

  }

  .tab{

  height:100%;

  width:100%;

  }

  :target{

  display:block;

  }

  看看效果:Demo

  当然,:target的功能不仅局限于此。隐藏元素、创建lightbox 等。MDN上给了很多个demo:more demo.

  你自己也可以脑洞大开一下,哈哈。

  浏览器支持

  对于:target伪类,浏览器支持情况还是不错的。

【CSS3实现选项卡切换的方法】相关文章:

css实现的tab切换效果实例03-29

linux命令切换目录的使用方法介绍03-01

关于Java动态实现的方法04-02

PHP实现多线程的方法03-29

php页面缓存实现方法11-27

C#TrieTree介绍及实现方法11-30

实现java屏幕抓屏的方法03-27

PHP实现获取域名的方法小结06-08

excel中实现文本换行的方法03-14