标签在左侧的CSS竖向简洁选项卡

2024-09-05 12:19:26

字体：大中小

来源：转载

供稿：网友

与标签在右侧的选项卡基本一样，看着很不错，鼠标点击后触发，这样用户更随便一些，有时候不喜欢滑动鼠标就切换；本选项卡多用于网页左侧的导航，常见于网站首页。

<!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>标签在左侧的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 id="getId">	<div 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 class="show" id="tabC1"><div class="con">Aspku.com</div>	</div>	<div class="hidden" id="tabC2"><div class="con">ASP</div>	</div>	<div class="hidden" id="tabC3"><div class="con">PHP</div>	</div>	<div class="hidden" id="tabC4"><div class="con">JSP</div>	</div></div></body></html>

上一篇：点击单选框切换对应的菜单

下一篇：标签在右侧的竖向选项卡

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注