选项卡在大量的网站都有应用，虽然形式各有不同，但是索要达成的目的都是一样的，一般都是为了进行分类或者节省网页空间只用，算是一件利器，下面就是一个选项卡的代码实例，通用性很强，下面就和大家分享一下。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
< charset=\" utf-8\">
< name=\"author\" content=\"http://www.manongjc.com/\" />
< >js实现的可以通用的选项卡代码实例</ >
<style type=\"text/css\">
body {text-align:center;}
.tab1, .tab2
{
width:350px;
margin:0 5px;
background:#CC9933;
opacity:0.5;
border-radius:5px 5px 5px 5px;
box-shadow:#CCC 4px 4px 4px;
text-align:left;
float:left;
display:inline;
}
.name
{
list-style:none;
overflow:hidden;
}
.name li
{
width:90px;
font:bold 16px/30px Verdana, Geneva, sans-serif;
background:#669900;
text-align:center;
border-radius:5px 5px 5px;
margin-right:5px;
float:left;
display:inline;
cursor:pointer;
}
li.selected{background:#FF9900;}
.content li
{
height:500px;
display:none;
}
</style>
< type=\"text/ \">
/**
* 事件处理通用函数
*/
var EventUtil={
getEvent:function(event)
{
return event ? event : window.event;
},
getTarget:function(event)
{
return event.target||event.srcElement;
},
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler,false);
}
else if(element.attachEvent)
{
element.attachEvent(\"on\"+type,handler);
}
else
{
element[\"on\"+type] = handler;
}
}
};
/**
* 选项卡通用函数
*/
// 传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
//取得全部选项卡区域
if(document.querySelectorAll)
{
var tabs=document.querySelectorAll(\".\"+inClassName);
}
else
{
var divs=document.getElementsByTagName(\"div\");
var tabs = new Array();
for(var k=0,lenDiv=divs.length;k<lenDiv;k++)
{
if(divs[k].className.indexOf(inClassName)>-1)
{
tabs.push(divs[k]);
}
}
}
//为每个选项卡建立切换功能
for(var j=0,len=tabs.length; j<len; j++)
{
//获取标题和内容列表
var tab = tabs[j];
//使用私有作用域为每个选项卡建立切换
(function(){
var nameUl = tab.getElementsByTagName(\"ul\")[0];
var content = tab.getElementsByTagName(\"ul\")[1];
//初始化选项卡
nameUl.getElementsByTagName(\"li\")[0].className = \"selected\";
content.getElementsByTagName(\"li\")[0].style.display = \"block\";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event)
{
//获取事件对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//选项卡切换
if(target.nodeName.toLowerCase() == \"li\")
{
//分别取得标题列表项和内容列表项
var nameList = nameUl.getElementsByTagName(\"li\");
var contentList = content.getElementsByTagName(\"li\");
//标题添加selected类，并显示内容
for(var i=0,len=nameList.length; i<len; i++)
{
nameList[i].className = \"\";
contentList.style.display = \"none\";
if(nameList == target)
{
nameList.className = \"selected\";
contentList.style.display = \"block\";
}
}
}
});
})();
}
}
window. =function()
{
//设置选项卡切换方式
tabSwitch(\"tab1\",\"click\");
tabSwitch(\"tab2\",\"mouseover\");
}
</ >
</head>
<body>
<div class=\"tab1\">
<ul class=\"name\">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class=\"content\">
<li>类为<em>\"tab1\"</em>项目一内容,通过<em>\"click\"</em>触发</li>
<li>类为<em>\"tab1\"</em>项目二内容,通过<em>\"click\"</em>触发</li>
<li>类为<em>\"tab1\"</em>项目三内容,通过<em>\"click\"</em>触发</li>
</ul>
</div>
<div class=\"tab1\">
<ul class=\"name\">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class=\"content\">
<li>类为<em>\"tab1\"</em>项目一内容,通过<em>\"click\"</em>触发</li>
<li>类为<em>\"tab1\"</em>项目二内容,通过<em>\"click\"</em>触发</li>
<li>类为<em>\"tab1\"</em>项目三内容,通过<em>\"click\"</em>触发</li>
</ul>
</div>
<div class=\"tab2\">
<ul class=\"name\">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class=\"content\">
<li>类为<em>\"tab2\"</em>项目一内容,通过<em>\"mouseover\"</em>触发</li>
<li>类为<em>\"tab2\"</em>项目二内容,通过<em>\"mouseover\"</em>触发</li>
<li>类为<em>\"tab2\"</em>\"项目三内容,通过<em>\"mouseover\"</em>触发</li>
</ul>
</div>
</body>
</html>
继续阅读与本文标签相同的文章
上一篇 :
超详细的微服务分布式架构统一配置中心选型对比
下一篇 :
js 设为首页和加入收藏(兼容性较好)
-
手机信号突然从“4G”变成“E”，是什么意思？客服给出答案
2026-05-14栏目： 教程
-
互联网架起“乌镇式生活”
2026-05-14栏目： 教程
-
微信才是内存“杀手”，别再乱清理，关闭这个功能，手机立马流畅
2026-05-14栏目： 教程
-
手机信号变成E是什么意思？看完专业人士给出的解释后，涨知识了
2026-05-14栏目： 教程
-
关于Word的四个隐藏办公小技巧，你可能一个也不知道，建议收藏！
2026-05-14栏目： 教程