js+css的tab选项卡 /*可给300分*/

请问我这个选项卡如果在同一个页面使用，或在多个页面重复使用，要如何修改？？当然，可以教我如何制作tab选项卡就更好了，html和css基本上会，就是JS我不太懂/*htm... 请问我这个选项卡如果在同一个页面使用，或在多个页面重复使用，要如何修改？？
当然，可以教我如何制作tab选项卡就更好了，html和css基本上会，就是JS我不太懂

/*html部分*/
<table width="365" border="0" cellspacing="0" cellpadding="0" class="tbtn1">
<tr>
<td class="tbtncon"><ul>
<li class="curr" id="tab1_btn_0" onmouseover="etabit(this)">百度</li>
<li id="tab1_btn_1" onmouseover="etabit(this)">google</li>
<li id="tab1_btn_2" onmouseover="etabit(this)">网易</li>
<li id="tab1_btn_3" onmouseover="etabit(this)">通讯</li>
</ul></td>
</tr>
<tr>
<td class="picList"><div id="tab1_div_0"> 111111111111111 </div>
<div id="tab1_div_1" style="display:none;"> 22222222222222222222 </div>
<div id="tab1_div_2" style="display:none;"> 33333333333333333333333333 </div>
<div id="tab1_div_3" style="display:none;"> 44444444444444444444444444444444444 </div></td>
</tr>
</table>

/*js部分*/
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
//document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
//document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};

function etabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
??????????? 怎么用？ 展开
 我来答
4个回答
#合辑# 机票是越早买越便宜吗？
天堂FisHo
2009-10-17 · 超过26用户采纳过TA的回答
知道答主
回答量：82
采纳率：0%
帮助的人：97.8万
我也去答题访问个人页
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="js轮换选项卡样式" CONTENT="">
<META NAME="js轮换选项卡样式" CONTENT="">
<META NAME="js轮换选项卡样式" CONTENT="">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY>
<style>
#fodsx {}
#fodsx td.sx0{background:url(http://mat1.qq.com/lady/indexpic910/ncard01.jpg) right no-repeat;}
#fodsx td.sx1{background:url(http://mat1.qq.com/lady/indexpic910/ncard02.jpg) right no-repeat;}
#fodsx td.sx2{background:url(http://mat1.qq.com/lady/indexpic910/ncard03.jpg) right no-repeat;}
#fodsx #Fod_listx p{margin:0;padding:0;width:191px;float:left;text-align:center;padding-top:6px;line-height:14px;color:#fff;font-weight:bold;font-size:12px;}
#fodsx #Fod_listx div.x{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx #Fod_listx .sx{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx ul,li{list-style-type:none;margin:0;padding:0;}
.dis{display:block}
.undis{display:none;}
.style1 {color: #444}
</style>
<table width="455" border="0" align="center" cellpadding="0" cellspacing="0" background="http://mat1.qq.com/lady/indexpic910/a91071.jpg" id="fodsx" style="background-position:left<style>
#fodsx {}
#fodsx td.sx0{background:url(http://mat1.qq.com/lady/indexpic910/ncard01.jpg) right no-repeat;}
#fodsx td.sx1{background:url(http://mat1.qq.com/lady/indexpic910/ncard02.jpg) right no-repeat;}
#fodsx td.sx2{background:url(http://mat1.qq.com/lady/indexpic910/ncard03.jpg) right no-repeat;}
#fodsx #Fod_listx p{margin:0;padding:0;width:191px;float:left;text-align:center;padding-top:6px;line-height:14px;color:#fff;font-weight:bold;font-size:12px;}
#fodsx #Fod_listx div.x{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx #Fod_listx .sx{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx ul,li{list-style-type:none;margin:0;padding:0;}
.dis{disop; background-repeat:no-repeat;margin-bottom:4px;">
<tr>
<td height="22" valign="bottom" class="sx0" id="Fod_listx"><p>
<script language="JavaScript">
<!---
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray(" 星期日"," 星期一"," 星期二"," 星期三"," 星期四"," 星期五"," 星期六"); document.write(today.getYear(),"年","",today.getMonth()+1,"月",today.getDate(),"日",d[today.getDay()+1]); //-->
</script>
</p>
<div class="sx" onmouseover="fodx(this)">美 体</div>
<div class="x" onmouseover="fodx(this)">情 感</div>
<div class="x" onmouseover="fodx(this)">美 发</div></td>
</tr>
<tr>
<td height="89" align="center" valign="top" background="http://mat1.qq.com/lady/indexpic910/a91072.jpg"><ul class="dis">
<li><table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="36" align="center" valign="bottom"><a href="http://lady.qq.com/zt/2008/jzmm/index.htm" target="_blank"><img src="http://mat1.qq.com/lady/images/index/2008/01/29/toutiao1.gif" width="386" height="30" border="0" /></a></td>
</tr>
<tr>
<td height="48" valign="bottom"><table width="400" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td height="44" class="peach1nl font14px"> <span class="style1">“金猪”年马上就要过去了，那些猪年生子的女星怎么样了？快来评出你心中最闪亮的明星妈妈！</span>
<a href="http://lady.qq.com/zt/2008/jzmm/index.htm" target="_blank" class="peach1nl font14px">[详细]</a></td>
</tr>
</table>
</td>
</tr>
</table>
</li>
</ul>
<ul class="undis">
<li> <table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="36" align="center" valign="bottom"><a href="http://lady.qq.com/a/20080129/000015.htm" target="_blank"><img src="http://mat1.qq.com/lady/images/index/2008/01/29/toutiao3.gif" width="386" height="30" border="0" /></a></td>
</tr>
<tr>
<td height="48" valign="bottom"><table width="400" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td height="44" class="peach1nl font14px"> <span class="style1">在一次激情过后，刚拿出了一部相机，对着没有来得及穿上衣服的我就拍，我极力的反抗，可是来不及了……</span>
<a href="http://lady.qq.com/a/20080129/000015.htm" target="_blank" class="peach1nl font14px">[详细]</a></td>
</tr>
</table>
</td>
</tr>
</table>
</li>
</ul>
<ul class="undis">
<li><table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="36" align="center" valign="bottom"><a href="http://lady.qq.com/a/20080129/000024.htm" target="_blank"><img src="http://mat1.qq.com/lady/images/index/2008/01/29/toutiao2.gif" width="386" height="30" border="0" /></a></td>
</tr>
<tr>
<td height="48" valign="bottom"><table width="400" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td height="44" class="peach1nl font14px"> <span class="style1">看看我们的盘点性感熟女萧蔷最美+最丑发型，萧美人犯过的错，大家可要小心别重蹈覆辙……</span>
<a href="http://lady.qq.com/a/20080129/000024.htm" target="_blank" class="peach1nl font14px">[详细]</a>
</td>
</tr>
</table>
</td>
</tr>
</table></li>
</ul></td>
</tr>
<tr>
<td height="4" background="http://mat1.qq.com/lady/indexpic910/a92073.gif"></td>
</tr>
</table>
<script language="javascript">
function fodx(obj)
{
//var p = document.getElementById("Fod_list").getElementsByTagName("div");
var pxN = document.getElementById("Fod_listx");
var px = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
var px1 = obj.parentNode.getElementsByTagName("div");
var tx = px.getElementsByTagName("tr")[1].getElementsByTagName("ul");
var n = px1.length;
for(i=0;i<n;i++)
{
if(px1[i] == obj)
{
pxN.className = "sx" + i;
px1[i].className = "sx";
tx[i].className = "dis";
}
else
{
px1[i].className = "x";
tx[i].className = "undis";
}
}
}
</script>
</BODY>
</HTML>

新建个HTML，复制进去看看效果
任何页面都可以重用

怎么用？打开Dreamweaver，新建一个HTML页面，然后切换到代码，把这些完全复制覆盖掉原来的，然后F12键预览。

中间的<style>到</style>都是css样式，可以自行修改

下面整个Table里的就是主要tab选项卡代码

下面分析一下你给的那个tab选项卡怎么重用：

function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
//document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
//document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};

function etabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};

这是主要JS代码
复制到你要重用的页面，不需要任何改动

重要的是这个TABLE，在不同页面改变的时候是要有“规则”的。

每个 tab选项卡上
比如：<li id="tab1_btn_1" onmouseover="etabit(this)">google</li>
都要加上onmouseover="etabit(this)"来触发JS

对应的tab选项卡的内容上
比如：<div id="tab1_div_1" style="display:none;"> 22222 </div>
都要与以上的那个li的id值对应
如：
id="tab1_btn_1" (li中)
id="tab1_div_1" (div中)
id中的数字要对应，0、1、2、3、4等（是指最后的那个_1，前面的tab1忽略）
英文不需要改动

这样就说明这个tab选项卡标题是对应这个tab选项卡的内容的。
有几个选项卡就加几对<li>（tab卡标题）和<div>(tab卡内容)
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
土味洋芋
2009-10-16 · 智慧城市架构师，构建未来城市
土味洋芋
采纳数：134 获赞数：1166

向TA提问 私信TA
展开全部
你这样写,不好的,不能重用,我给你写一个:

注意:其它的tag都不用管,你需要给tag <ul>一个ID;然后获得所有的<li>.

<style type="text/css">
.curr {
margin:2;
float:left;
background:blue;
}

.unCurr{
margin:2;
float:left;
background:#555555;
}
</style>

<ul id="selects"> <!--增加ID-->
<li class="curr" onmouseover="selectObj(this);">百度</li>
<li class="unCurr" onmouseover="selectObj(this);">google</li>
<li class="unCurr" onmouseover="selectObj(this);">网易</li>
<li class="unCurr" onmouseover="selectObj(this);">通讯</li>
</ul>

<script type="text/javascript">
function selectObj(obj){
var objArray = document.getElementById("selects").getElementsByTagName("li"); //得到ul 下 所有 li 对象 为数组
var count = objArray.length; //得到数组selects长度
for(var i=0;i<count;i++){ //将所有选项都置为不选中
objArray[i].className="unCurr";
}
obj.className="curr"; //选中当前项
}
</script>

这样的写法,只需要得到ul id就OK,在任何页面都可以使用.

帅哥,专为你写的,给分吧,有不明白加我Q:88438739 注:baidu.com
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
Horace1Horace
推荐于2016-11-27
知道答主
回答量：89
采纳率：0%
帮助的人：21.5万
我也去答题访问个人页
展开全部
请问我这个选项卡如果在同一个页面使用，或在多个页面重复使用，要如何修改？？
当然，可以教我如何制作tab选项卡就更好了，html和css基本上会，就是JS我不太懂

/*html部分*/
<table width="365" border="0" cellspacing="0" cellpadding="0" class="tbtn1">
<tr>
<td class="tbtncon"><ul>
<li class="curr" id="tab1_btn_0" onmouseover="etabit(this)">百度</li>
<li id="tab1_btn_1" onmouseover="etabit(this)">google</li>
<li id="tab1_btn_2" onmouseover="etabit(this)">网易</li>
<li id="tab1_btn_3" onmouseover="etabit(this)">通讯</li>
</ul></td>
</tr>
<tr>
<td class="picList"><div id="tab1_div_0"> 111111111111111 </div>
<div id="tab1_div_1" style="display:none;"> 22222222222222222222 </div>
<div id="tab1_div_2" style="display:none;"> 33333333333333333333333333 </div>
<div id="tab1_div_3" style="display:none;"> 44444444444444444444444444444444444 </div></td>
</tr>
</table>

/*js部分*/
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
//document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
//document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};

function etabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
问题补充：??????????? 怎么用？
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
鋇遺輞锝過紶
2009-10-14 · TA获得超过950个赞
知道大有可为答主
回答量：2125
采纳率：0%
帮助的人：1090万
我也去答题访问个人页
展开全部
用框架会很简单````
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（2）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2025Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式