標(biāo)簽在左側(cè)的CSS豎向簡潔選項卡

2024-09-05 12:19:26

字體：大中小

供稿：網(wǎng)友

與標(biāo)簽在右側(cè)的選項卡基本一樣，看著很不錯，鼠標(biāo)點(diǎn)擊后觸發(fā)，這樣用戶更隨便一些，有時候不喜歡滑動鼠標(biāo)就切換；本選項卡多用于網(wǎng)頁左側(cè)的導(dǎo)航，常見于網(wǎng)站首頁。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>標(biāo)簽在左側(cè)的CSS豎向簡潔選項卡</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{padding:50px;margin:0;color:#666;font:12px arial,sans-serif;}#getId{width:400px;}.tabT{width:100px;float:left;padding:0;margin:0px;background:url(http://www.codefans.net/jscss/demoimg/200903/dot.jpg) repeat-y right;height:400px;}.tab,.tab li{padding:0;margin:0;border:none}.tab{height:23px;display:block;}.tab li{display:block;height:18px;line-height:18px;padding:10px 2px;text-align:center;cursor:pointer;}.tab li.current{display:block;color:red;background-color:#fff;border-right:0px solid red;border-left:1px solid red;border-top:1px solid red;border-bottom:1px solid red;padding:10px 2px;}.show,hidden{float:left;width:299px;margin-top:0px;border-style:solid;border-width:1px 1px 1px 0px;border-color:red;text-align:left;height:400px;}.hidden{display:none;}.show{display:block;}.con{padding:10px;}</style><script type="text/javascript" language="javascript"></script></head><body><div   class="70qarhlowxag"   id="getId">	<div   id="70qarhlowxag"   class="tabT">		<ul class="tab">		<li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">Home</li>		<li id="tabId2" onclick="tab('tabId2','tabC2');">ASP</li>		<li id="tabId3" onclick="tab('tabId3','tabC3');">PHP</li>		<li id="tabId4" onclick="tab('tabId4','tabC4');">JSP</li>		</ul>	</div>	<div   id="70qarhlowxag"   class="show" id="tabC1"><div   id="70qarhlowxag"   class="con">Aspku.com</div>	</div>	<div   id="70qarhlowxag"   class="hidden" id="tabC2"><div   id="70qarhlowxag"   class="con">ASP</div>	</div>	<div   id="70qarhlowxag"   class="hidden" id="tabC3"><div   id="70qarhlowxag"   class="con">PHP</div>	</div>	<div   id="70qarhlowxag"   class="hidden" id="tabC4"><div   id="70qarhlowxag"   class="con">JSP</div>	</div></div></body></html>

上一篇：點(diǎn)擊單選框切換對應(yīng)的菜單

下一篇：標(biāo)簽在右側(cè)的豎向選項卡