您现在的位置是：网站首页> 编程资料编程资料

使用CSS3实现选项卡切换的方法css3实现的带图标鼠标点击切换选项卡特效源码一款纯css3实现的tab选项卡的实列教程使用css3实现的tab选项卡代码分享

2021-09-05 1797人已围观

简介 这篇文章主要介绍了使用CSS3实现选项卡切换的方法,主要使用到了:target伪类,需要的朋友可以参考下

: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复制内容到剪贴板
  1. "#tab">Test :target   
  2. "#tab2">Test 2:target   
  3. "tab">This is a tab.
  
  • "tab2">This is another tab.
    •   

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

    CSS Code复制内容到剪贴板
    1. :target{   
    2.     color:red;   
    3. }   
    4. #tab:target::after{   
    5.     content:"tab1"  
    6. }  

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

    效果猛戳：https://jsfiddle.net/dwqs/cL8rawov/
    应该大致明白了:target的含义了吧~

    :target可以做什么

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

          

    XML/HTML Code复制内容到剪贴板
    1. <div class="tab-control">  
    2.           <a href="#tab1">tab1a>  
    3.           <a href="#tab2">tab2a>  
    4.           <a href="#tab3">tab3a>  
    5.       div>  
    6.       <div class="tabs">  
    7.           <div id="tab1" class="tab">This is a tab1div>  
    8.           <div id="tab2" class="tab">This is a tab2div>  
    9.           <div id="tab3" class="tab">This is a tab3div>  
    10.       div>  

    CSS:

    CSS Code复制内容到剪贴板
    1. .tab-control a{   
    2.     display:inline-block;   
    3.     text-decoration:none;   
    4.     color:#FFF;   
    5.     height:20px;   
    6.     width:40px;   
    7.     text-align:center;   
    8.     line-height:20px;   
    9.     background:rgba(70,121,189,0.75);   
    10. }   
    11. .tab-control a:hover{   
    12.     background:rgba(70,121,189,1);   
    13. }   
    14. .tabs{   
    15.     position:relative;   
    16.     border:1px solid red;   
    17.     height:200px;   
    18.     width:135px;   
    19.     overflow:hidden;   
    20. }   
    21. .tab{   
    22.     height:100%;   
    23.     width:100%;   
    24. }   
    25. :target{   
    26.     display:block;   
    27. }  

    看看效果：Demo
    当然，:target的功能不仅局限于此。隐藏元素、创建lightbox 等。MDN上给了很多个demo:more demo.
    你自己也可以脑洞大开一下，哈哈。
    浏览器支持

    对于:target伪类，浏览器支持情况还是不错的。
    201583175701517.png (1242×410)

    上一篇：CSS中关于变量的基本教程CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

    下一篇：不用table而实现等分DIV的方法jquery实现的div拖动排序插件jquery.sortable源码CSS：Table-cell属性的妙用让div也能享受table定位的好处实现div垂直居中的display:table-cell方法示例介绍

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网