css中怎么實(shí)現(xiàn)tab切換效果

發(fā)布時(shí)間：2021-08-07 17:38:19 來(lái)源：億速云閱讀：200 作者：Leah 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)css中怎么實(shí)現(xiàn)tab切換效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

其實(shí)是使用錨點(diǎn)作為標(biāo)記，通過(guò)點(diǎn)擊實(shí)現(xiàn)了切換。css代碼

body,div,ul,li{margin:0; padding:0; font-size:12px;} 
.clearFloat{ clear:both; height:0; line-height:0; font-size:0;} 
.tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; background-color:#FCEDFF;border:1px solid #DBA4E8; border-bottom:0;} 
.tab_ul li{ float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;} 
.tab_ul li a{ display:block;width:46px; height:26px; line-height:26px; text-align:center;font-size:12px; color:#000000; text-decoration:none;} 
.tab_ul li a:hover{color:#5F0082; font-weight:bold;} 
.tabDiv{ margin:0 auto; width:248px; height:200px; border:1px solid #DBA4E8; border-top:0; overflow:hidden;} 
.tabDiv ul{ margin:0 auto; padding-top:10px; width:218px; height:190px;} 
.tabDiv ul li{ height:24px;color:#666666; font-size:12px; margin-left:20px; } 
.tabDiv ul li a{ color:#333333; margin-left:5px;}

代碼如下:

</pre>html代碼<pre name="code" class="css"><body> 
<!--tab--> 
<ul class="tab_ul"> 
<li><a href="#ul1">目錄1</a></li> 
<li><a href="#ul2">目錄2</a></li> 
<li><a href="#ul3">目錄3</a></li> 
<li><a href="#ul4">目錄4</a></li> 
</ul> 
<div class="tabDiv"> 
<ul id="ul1"> 
<li><a href="#" >java</a></li> 
<li><a href="#" >c++</a></li> 
<li><a href="#" >c#</a></li> 
<li><a href="#" >php</a></li> 
<li><a href="#" >javascript</a></li> 
<li><a href="#" >css</a></li> 
<li><a href="#" >html</a></li> 
</ul> 
<ul id="ul2"> 
<li><a href="#" >語(yǔ)文</a></li> 
<li><a href="#" >數(shù)學(xué)</a></li> 
<li><a href="#" >英語(yǔ)</a></li> 
<li><a href="#" >歷史</a></li> 
<li><a href="#" >地理</a></li> 
<li><a href="#" >生物</a></li> 
<li><a href="#" >化學(xué)</a></li> 
</ul> 
<ul id="ul3"> 
<li><a href="#" >紅色</a></li> 
<li><a href="#" >黃色</a></li> 
<li><a href="#" >橙色</a></li> 
<li><a href="#" >綠色</a></li> 
<li><a href="#" >紫色</a></li> 
<li><a href="#" >藍(lán)色</a></li> 
<li><a href="#" >黑色</a></li> 
</ul> 
<ul id="ul4"> 
<li><a href="#" >運(yùn)營(yíng)</a></li> 
<li><a href="#" >設(shè)計(jì)</a></li> 
<li><a href="#" >產(chǎn)品</a></li> 
<li><a href="#" >程序</a></li> 
<li><a href="#" >美工</a></li> 
<li><a href="#" >交互</a></li> 
<li><a href="#" >經(jīng)理</a></li> 
</ul> 
</div> 
<!--tab結(jié)束--> 
</body>

看完上述內(nèi)容，你們對(duì)css中怎么實(shí)現(xiàn)tab切換效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

css中怎么實(shí)現(xiàn)tab切換效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽