标签在底部的简洁CSS选项卡

2024-09-05 12:19:27

字体：大中小

来源：转载

供稿：网友

标签在底部，这个不多见噢，不过可以收藏一下，说不定什么时候就用上了！而且代码简洁，调用及修改都方便，用到了一个小图片，查看效果时候可以下载。

<!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;}.tabT{width:400px;padding:0;margin:0;background:#ddd url(/jscss/demoimg/200903/dot.jpg) repeat-x top;}.tab,.tab li{padding:0;margin:0;border:none}.tab{height:23px;display:block;width:400px;}.tab li{display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;}.tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-bottom:1px solid red;padding:2px 20px;}.show,hidden{width:398px;height:100px;margin:0;border-right:1px solid red;border-bottom:0px solid red;border-left:1px solid red;border-top:1px solid red;text-align:left;}.hidden{display:none;}.show{display:block;}.con{padding:10px;}</style><script type="text/javascript" language="javascript"></script></head><body><div id="getId">	<div class="show" id="tabC1"><div class="con">Main</div>	</div>	<div class="hidden" id="tabC2"><div class="con">ASP</div>	</div>	<div class="hidden" id="tabC3"><div class="con">JQUERY</div>	</div>	<div class="hidden" id="tabC4"><div class="con">AJAX</div>	</div>	<div class="tabT">		<ul class="tab">			 <li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">Main</li>			 <li id="tabId2" onclick="tab('tabId2','tabC2');">ASP</li>			 <li id="tabId3" onclick="tab('tabId3','tabC3');">JQUERY</li>			 <li id="tabId4" onclick="tab('tabId4','tabC4');">AJAX</li>		</ul>	</div></div></body></html>

上一篇：JS仿QQ的展开/折叠菜单

下一篇：带动画下拉展开的CSS滑动门

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注