最近在优化主题后台控制，发现内容太长，于是就想到用选项卡，上网搜索了，一般都是css+js来实现的，不过个人因为不懂JS，所以最后找了一个纯CSS的选项卡代码，给大家分享下：
代码如下：（复制代码用文本编辑器保存为HTML文件运行）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS选项卡</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none; font-size:12px; }
#bt{
display:block;
position:relative;
width:800px;
height:auto;
padding-top:50px;
margin-left:60px;
}
#bt ul{
position:absolute;
left:10px;
top:20px;
}
#bt ul li{
display:block;
background:#fff;
float:left;
width:100px;
height:18px;
border-top:solid 2px #666;
border-left:solid 2px #666;
border-right:solid 2px #666;
border-bottom:solid 2px #666;
padding:5px 8px;
margin-left:5px;
display:block;
text-align:center;
}
#bt ul li:hover, #bt ul li:visited{
border-bottom:solid 2px #fff;
}
#bc{
height:500px;
overflow:hidden;
border-bottom:solid 2px #666;
}
#b1, #b2, #b3{
border:solid 2px #666;
padding:5px;
margin:0px 0px 5px;
width:786px;
height:500px;
overflow:hidden;
background:#fff;
}
</style>
</head>
<body>
<div id="bt">
<ul>
<a href="#b1">
<li>选项卡一</li>
</a>
<a href="#b2">
<li>选项卡二</li>
</a>
<a href="#b3">
<li>选项卡三</li>
</a>
</ul>
<div id="bc">
<div id="b1">
<a href="http://memory.shamqu.cn/">I'm Sham: http://memory.shamqu.cn</a>
</div>
<div id="b2">
选项卡二选项卡二选项卡二选项卡二选项卡二选项卡二选项卡二选项卡二选项卡二
</div>
<div id="b3">
选项卡三 选项卡三选项卡三选项卡三选项卡三选项卡三选项卡三选项卡三选项卡三选项卡三选项卡三选项卡三选项卡三
</div>
</div>
</div>
</body>
</html>
进阶：我们还可以通过代码来显示出你当前所在的位置，这里只能添加一段js代码了，在head里面添加如下代码：
<!--鼠标点击li或者div变css效果-->
<script type="text/javascript">
var perDiv=null;
function chgColor(_this)
{
if(perDiv) perDiv.style.borderBottomColor='';
_this.style.borderBottomColor='#fff';
perDiv=_this;
}
</script>
<script type="text/javascript">
var perDiv=null;
function chgColor(_this)
{
if(perDiv) perDiv.style.borderBottomColor='';
_this.style.borderBottomColor='#fff';
perDiv=_this;
}
</script>
于此同时，把li修改成如下代码，添加点击变色效果
<li onclick='chgColor(this)'>
修改后再看看效果，当你点击相应选项卡之后，标签菜单底部的Border就会变成白色，这样就能明显看出所在位置了
作者：Sham
发表日期：2012-12-27 13:56
分类：收藏与分享
标签：css, tab, 选项卡
固定链接：https://memory.shamqu.cn/css-tab-without-js.html
转载请说明出处；如内容侵犯到您的版权，请与我联系。
分享到：
发表日期：2012-12-27 13:56
分类：收藏与分享
标签：css, tab, 选项卡
固定链接：https://memory.shamqu.cn/css-tab-without-js.html
转载请说明出处；如内容侵犯到您的版权，请与我联系。
分享到：
发表回复