用 CSS target属性做一个tab页面

功能简述

我的目标是运用CSS做一个tab页面,target属性的用法就是点击某个a标签的href 然后捏,他的href标签指向的id就是就是target。这个IE低版本支持不了下面是can i use 的截图
用 CSS target属性做一个tab页面_第1张图片

源代码

<html>
    <head>
        <meta charset="utf-8" />
        <title >target的选择器title>
        <style>
            a[href="tab1"]{
                color:green;
            }
            #tab1:target,#tab2:target,#tab3:target{
                color: red;
                 z-index: 1;
         /* 
             通过z-index来进行调整属性 
            下面可以看到content的那边有position absolute  

          */
            }
            #tab2,#tab3{
                /* display: none; */

            }
            .tabs{
                list-style: none;
            }
            .tabs li{
                display: inline;
                width:30px;

            }
            .tabs a{
                color:green;

            }
            .tab-content{
                width:300px;
                height:200px;
                border:1px solid #eee;
                position: absolute;
                background-color:#eee;
            }
        style>
    head>

    <body>

        <ul class="tabs">
            <li><a href="#tab1">href1a>li>
            <li><a href="#tab2">href2a>li>
            <li><a href="#tab3">href3a>li>
        ul>
        <div class="tab-wrap">
            <div class="tab-content"  id="tab1">tab1div>
            <div class="tab-content"  id="tab2">tab2div>
            <div class="tab-content"  id="tab3">tab3div>
        div>





    body>

html>

简单解释

1 通过a 的href 点击 是的 下面的内容被选中的z-index调整从而实现tab效果。

注意 必须IE9以上

你可能感兴趣的:(CSS)