<div class="match-instruction"><div id="tab2" class="mi-cont">獎項設置</div><div id="tab3" class="mi-cont">評審標準</div><div id="tab4" class="mi-cont">活動動態</div><div id="tab1" class="mi-cont active">參賽時間及方式</div><ul class="mi-tab"><li><a href="#tab1"><span>參賽時間及方式</span></a></li><li><a href="#tab2"><span>獎項設置</span></a></li><li><a href="#tab3"><span>評審標準</span></a></li><li><a href="#tab4"><span>活動動態</span></a></li></ul></div>

?上面是頁面html結構，下面貼css樣式代碼

<style> .match-instruction{position:relative; padding-top:1.9rem;} div[id^="tab"]{color:#fff; display:none;} #tab1:target,#tab2:target,#tab3:target,#tab4:target{display:block;} #tab1.active{display:block;} #tab2:target~#tab1,#tab3:target~#tab1,#tab4:target~#tab1{display:none;} #tab1:target~.mi-tab li:nth-child(1),#tab2:target~.mi-tab li:nth-child(2),#tab3:target~.mi-tab li:nth-child(3),#tab4:target~.mi-tab li:nth-child(4){z-index:5; margin-top:0;} #tab1:target~.mi-tab li:nth-child(1):after,#tab2:target~.mi-tab li:nth-child(2):after,#tab3:target~.mi-tab li:nth-child(3):after,#tab4:target~.mi-tab li:nth-child(4):after{border-bottom-width:1.9rem;} #tab1:target~.mi-tab li a[href="#tab1"],#tab2:target~.mi-tab li a[href="#tab2"],#tab3:target~.mi-tab li a[href="#tab3"],#tab4:target~.mi-tab li a[href="#tab4"]{height:1.9rem; line-height:2.05rem;} .mi-tab{height:1.9rem; position:absolute; left:0; top:0; right:0; margin-right:.8rem;} .mi-tab li{float:left; width:31%; position:relative; background-color:#77c8df; z-index:4; margin-top:.3rem;} .mi-tab li+li{width:23%; z-index:3; background-color:#a2ca64;} .mi-tab li+li+li{z-index:2; background-color:#f0c55e;} .mi-tab li+li+li+li{z-index:1; background-color:#90c89f;} .mi-tab li:after{content:""; position:absolute; right:-.8rem; bottom:0; width:0; height:0; border-right:.8rem solid transparent; border-bottom:1.6rem solid #77c8df;} .mi-tab li+li:after{border-bottom-color:#a2ca64;} .mi-tab li+li+li:after{border-bottom-color:#f0c55e;} .mi-tab li+li+li+li:after{border-bottom-color:#90c89f;} .mi-tab a{display:block; height:1.6rem; line-height:1.75rem; font-size:.65rem; color:#373534; text-align:center; margin-right:-.4rem;} .mi-tab a span{position:relative; z-index:1;} .mi-tab li:first-child{z-index:5; margin-top:0;} .mi-tab li:first-child:after{border-bottom-width:1.9rem;} .mi-tab li:first-child a{height:1.9rem; line-height:2.05rem;} #tab2:target~.mi-tab li:first-child,#tab3:target~.mi-tab li:first-child,#tab4:target~.mi-tab li:first-child{z-index:4; margin-top:.3rem;} #tab2:target~.mi-tab li:first-child:after,#tab3:target~.mi-tab li:first-child:after,#tab4:target~.mi-tab li:first-child:after{border-bottom-width:1.6rem;} #tab2:target~.mi-tab li:first-child a,#tab3:target~.mi-tab li:first-child a,#tab4:target~.mi-tab li:first-child a{height:1.6rem; line-height:1.75rem;} </style>

?這個css實現tab切換效果在實際項目中并不實用，這里只是單純的提供一種css實現方案，效果如下圖

轉載于:https://www.cnblogs.com/jokum/p/7452599.html

總結

以上是生活随笔為你收集整理的css实现tab切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。