本文介绍了两种使用HTML、CSS及JavaScript实现标签页切换的方法。第一种方法为每个标签页编写独立的函数；第二种方法通过传递参数的方式实现复用，减少代码冗余。这两种方法都实现了点击标签时显示相应内容并隐藏其他内容的功能。
第一种：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!--
.tabname{ width:300px; height:24px; line-height:24px; background:#CCCCCC;}
.tabname a{ display:block; float:left; color:#fff; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtab{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtag{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.con1{ width:300px; height:300px; font-size:20px; color:#000000; background:#9933FF;}
.kuang1{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
.kuang2{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
-->
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!--
.tabname{ width:300px; height:24px; line-height:24px; background:#CCCCCC;}
.tabname a{ display:block; float:left; color:#fff; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtab{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtag{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.con1{ width:300px; height:300px; font-size:20px; color:#000000; background:#9933FF;}
.kuang1{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
.kuang2{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
-->
</style>
<script>
function selectMenu1(oThis, tabID)
{
var oTags = document.getElementById("sc_tab1");
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
if(tabID=="tab0"){
document.getElementById("tab0").style.display = "block";
document.getElementById("tab1").style.display = "none";
}
if(tabID=="tab1"){
document.getElementById("tab1").style.display = "block";
document.getElementById("tab0").style.display = "none";
}
function selectMenu1(oThis, tabID)
{
var oTags = document.getElementById("sc_tab1");
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
if(tabID=="tab0"){
document.getElementById("tab0").style.display = "block";
document.getElementById("tab1").style.display = "none";
}
if(tabID=="tab1"){
document.getElementById("tab1").style.display = "block";
document.getElementById("tab0").style.display = "none";
}
}
function selectMenu2(oThis, tabID)
{
var oTags = document.getElementById("sc_tab2");
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
if(tabID=="tab2"){
document.getElementById("tab2").style.display = "block";
document.getElementById("tab3").style.display = "none";
}
if(tabID=="tab3"){
document.getElementById("tab3").style.display = "block";
document.getElementById("tab2").style.display = "none";
}
function selectMenu2(oThis, tabID)
{
var oTags = document.getElementById("sc_tab2");
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
if(tabID=="tab2"){
document.getElementById("tab2").style.display = "block";
document.getElementById("tab3").style.display = "none";
}
if(tabID=="tab3"){
document.getElementById("tab3").style.display = "block";
document.getElementById("tab2").style.display = "none";
}
}
</script>
</head>
<body>
<div class="kuang1">
<div class="tabname" id="sc_tab1">
<a href="#" class="nowtab" onclick="selectMenu1(this, 'tab0')">页面一</a>
<a href="#" onclick="selectMenu1(this, 'tab1')">页面二</a>
</div>
<div class="con1" id="tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
<div class="kuang1">
<div class="tabname" id="sc_tab1">
<a href="#" class="nowtab" onclick="selectMenu1(this, 'tab0')">页面一</a>
<a href="#" onclick="selectMenu1(this, 'tab1')">页面二</a>
</div>
<div class="con1" id="tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
<div class="kuang1">
<div class="tabname" id="sc_tab2">
<a href="#" class="nowtab" onclick="selectMenu2(this, 'tab2')">页面3</a>
<a href="#" onclick="selectMenu2(this, 'tab3')">页面4</a>
</div>
<div class="con1" id="tab2"><p>这是页面3的内容</p></div>
<div class="con1" id="tab3" style="display:none;"><p>这是页面4的内容</p></div>
</div>
<div class="tabname" id="sc_tab2">
<a href="#" class="nowtab" onclick="selectMenu2(this, 'tab2')">页面3</a>
<a href="#" onclick="selectMenu2(this, 'tab3')">页面4</a>
</div>
<div class="con1" id="tab2"><p>这是页面3的内容</p></div>
<div class="con1" id="tab3" style="display:none;"><p>这是页面4的内容</p></div>
</div>
</body>
</html>
</html>
第二种：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!--
.tabname{ width:300px; height:24px; line-height:24px; background:#CCCCCC;}
.tabname a{ display:block; float:left; color:#fff; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtab{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtag{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.con1{ width:300px; height:300px; font-size:20px; color:#000000; background:#9933FF;}
.kuang1{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
.kuang2{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
-->
</style>
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!--
.tabname{ width:300px; height:24px; line-height:24px; background:#CCCCCC;}
.tabname a{ display:block; float:left; color:#fff; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtab{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtag{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.con1{ width:300px; height:300px; font-size:20px; color:#000000; background:#9933FF;}
.kuang1{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
.kuang2{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
-->
</style>
<script>
function selectMenu(scID, oThis, tabID)
{
var oTags = document.getElementById(scID);
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
var divID = scID.substring(0, 3);
for (i = 0; j = document.getElementById(divID + "tab" + i); i++)
{
j.style.display = "none";
}
document.getElementById(tabID).style.display = "";
}
</script>
function selectMenu(scID, oThis, tabID)
{
var oTags = document.getElementById(scID);
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
var divID = scID.substring(0, 3);
for (i = 0; j = document.getElementById(divID + "tab" + i); i++)
{
j.style.display = "none";
}
document.getElementById(tabID).style.display = "";
}
</script>
</head>
<body>
<div class="kuang1">
<div class="tabname" id="sc_div1">
<a href="#" class="nowtab" onclick="selectMenu('sc_div1',this, 'sc_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sc_div1',this, 'sc_tab1')">页面二</a>
</div>
<div class="con1" id="sc_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sc_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
<div class="kuang1">
<div class="tabname" id="sc_div1">
<a href="#" class="nowtab" onclick="selectMenu('sc_div1',this, 'sc_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sc_div1',this, 'sc_tab1')">页面二</a>
</div>
<div class="con1" id="sc_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sc_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
<div class="kuang1">
<div class="tabname" id="sf_div2">
<a href="#" class="nowtab" onclick="selectMenu('sf_div2',this, 'sf_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sf_div2',this, 'sf_tab1')">页面二</a>
</div>
<div class="con1" id="sf_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sf_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
<div class="tabname" id="sf_div2">
<a href="#" class="nowtab" onclick="selectMenu('sf_div2',this, 'sf_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sf_div2',this, 'sf_tab1')">页面二</a>
</div>
<div class="con1" id="sf_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sf_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
</body>
</html>
</html>
扫一扫
171万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
