使用纯css实现tab切换

html页面

<div class="tablist">
    <ul class="tabmenu">
         <li><a href="#tab1">tab1</a></li>
         <li><a href="#tab2">tab2</a></li>
         <li><a href="#tab3">tab3</a></li>
    </ul>
    <div id="tab1" class="tab_content">tab1</div>
    <div id="tab2" class="tab_content">tab2</div>
    <div id="tab3" class="tab_content">tab3</div>
</div>

css样式

.tabmenu{
         position:absolute;
         top:-28px;
         left:144px;
         margin:0px;
     }
     .tabmenu li{
         display:inline-block;
     }
     .tabmenu li a{
         display:block;
         padding:5px 10px;
         margin:0 10px 0 0;
         border:1px solid #91a7b4;
         border-radius:5px 5px 0 0;
         background-color:#e3f1f8;
         color:#333;
         text-decoration: none;
         font-size:16px;
     }
     .tablist{
         position:relative;
         top:200px;
         margin:0 auto;
         width:600px;
         min-height:200px;
     }
     .tab_content{
         position:absolute;
         width:600px;
         height:170px;
         padding:15px;
         border:1px solid #91a7b4;
         border-radius:10px;
         box-shadow:0 2px 3px rgba(0,0,0,0,1);
         font-size:16px;
         line-height:16px;
         color:#666;
         background-color:#fff;
     }
     #tab1:target,#tab2:target,#tab3:target{
         z-index:1;
     }

效果图如下：