用 CSS target属性做一个tab页面

最新推荐文章于 2024-04-12 02:51:01 发布

yatsov

最新推荐文章于 2024-04-12 02:51:01 发布

阅读量574

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/yatsov/article/details/82257666

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

功能简述

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

源代码

<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">href1</a></li>
            <li><a href="#tab2">href2</a></li>
            <li><a href="#tab3">href3</a></li>
        </ul>
        <div class="tab-wrap">
            <div class="tab-content"  id="tab1">tab1</div>
            <div class="tab-content"  id="tab2">tab2</div>
            <div class="tab-content"  id="tab3">tab3</div>
        </div>





    </body>

</html>

简单解释

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

注意必须IE9以上

yatsov

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用 CSS target属性做一个tab页面

功能简述我的目标是运用CSS做一个tab页面，target属性的用法就是点击某个a标签的href 然后捏，他的href标签指向的id就是就是target。这个IE低版本支持不了下面是can i use 的截图源代码&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;...
复制链接

扫一扫

专栏目录