:target伪类制作tab选项卡

攻城狮统轩技术 2022年11月20日

0 收藏 463 点赞 3,126 浏览 1412 个字

:target伪类的作用是突出显示活动的HTML锚，下面是一个简单的例子：

HTML代码：

 <div>
     <a href="#demo1" rel="external nofollow" >点击此处</a>
 </div>
 <div id="demo1">测试结果</div>

CSS代码：

 :target{
    color: #343434;
    border: 1px solid red;
    background-color: red;
 }

#demo1写在链接里，表示指向一个目标元素，而id=demo1的div元素即是想要选中的目标元素。这段代码操作后的效果为：

点击a元素之后，目标元素#demo1的样式发生了变化，变化的样式即css代码所写的。

:target是css3新增的属性，目前最常用到的地方便是tab选项卡制作。

以前的tab选项卡一般运用js或者jquery来实现，现在只要用css3的:target便可以完成。

代码示例：

HTML代码：

 <ul class="tab-title">
     <li><a href="#music" rel="external nofollow" >音乐</a></li>
     <li><a href="#fun" rel="external nofollow" >娱乐</a></li>
     <li><a href="#photo" rel="external nofollow" >摄影</a></li>
 </ul>
 <div id="music">音乐</div>
 <div id="fun">娱乐</div>
 <div id="photo">摄影</div>

CSS代码：

 ul{
   width: 303px;
   height: 40px;
   text-align: center;
   line-height: 40px;
   list-style: none;
   border: 1px solid #333;
   margin: 40px auto 0;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
 li{
   float: left;
   width: 100px;
   border-right: 1px solid #333;
   display: table;
 }
 li:nth-child(3){
    border: none;
 }
 li > a {
   color: #333;
   text-decoration: none;
   display: table-cell;
   vertical-align: middle;
 }
 li:nth-child(1) > a{
   border-top-left-radius: 10px;
 }
 li:nth-child(3) > a{
   border-top-right-radius: 10px;
 }
 li > a:hover    {
   background-color: #8BB7F9;
 }
 div{
   position: absolute;      必须
   left: 161px;
   width: 303px;
   height: 150px;
   line-height: 150px;
   text-align: center;
   border: 1px solid #333;
   border-top: none;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   background: #fff;
 }
 #music:target,#fun:target,#photo:target{
   z-index:;                                                     //必须
 };