<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>简洁Tab</title><style type="text/css">
body
{
padding:0;font:12px "宋体";
}/*选项卡1*/#lib_Tab1
{
width:500px;margin:0px;padding:0px;margin-bottom:15px;
}/*菜单class*/.lib_tabborder
{
border:1px solid #95C9E1;
}
.lib_Menubox
{
height:28px;line-height:28px;position:relative;
}
.lib_Menubox ul
{
margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center;
}
.lib_Menubox li
{
float:left;display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD
}
.lib_Menubox li.hover
{
padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;color:#739242;height:25px;line-height:25px;
}
.lib_Contentbox
{
clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;
}
--></style>
<script>function setTab(name,cursel,n)// name,cursel,n这个是什么意思呢?
{
for(i=1;i<=n;i++)
{
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":""; //这里2个地方
con.style.display=i==cursel?"block":"none"; //完全看不懂
}
}
//-->
</script>
</head>
<body>
<div id="lib_Tab1"><div class="lib_Menubox lib_tabborder">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li>
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,4)">新闻3</li>
<li id="one4" onclick="setTab('one',4,4)">新闻4</li></ul></div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_one_1" >新闻列表1</div>
<div id="con_one_2" style="display:none">新闻列表2</div>
<div id="con_one_3" style="display:none">新闻列表3</div>
<div id="con_one_4" style="display:none">新闻列表4</div>
</div></div>
</body></html>
body
{
padding:0;font:12px "宋体";
}/*选项卡1*/#lib_Tab1
{
width:500px;margin:0px;padding:0px;margin-bottom:15px;
}/*菜单class*/.lib_tabborder
{
border:1px solid #95C9E1;
}
.lib_Menubox
{
height:28px;line-height:28px;position:relative;
}
.lib_Menubox ul
{
margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center;
}
.lib_Menubox li
{
float:left;display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD
}
.lib_Menubox li.hover
{
padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;color:#739242;height:25px;line-height:25px;
}
.lib_Contentbox
{
clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;
}
--></style>
<script>function setTab(name,cursel,n)// name,cursel,n这个是什么意思呢?
{
for(i=1;i<=n;i++)
{
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":""; //这里2个地方
con.style.display=i==cursel?"block":"none"; //完全看不懂
}
}
//-->
</script>
</head>
<body>
<div id="lib_Tab1"><div class="lib_Menubox lib_tabborder">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li>
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,4)">新闻3</li>
<li id="one4" onclick="setTab('one',4,4)">新闻4</li></ul></div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_one_1" >新闻列表1</div>
<div id="con_one_2" style="display:none">新闻列表2</div>
<div id="con_one_3" style="display:none">新闻列表3</div>
<div id="con_one_4" style="display:none">新闻列表4</div>
</div></div>
</body></html>
{
for(i=1;i<=n;i++)
{
name,cursel,n是setTab的参数;也就是说有3个参数
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,4)">新闻3</li>
<li id="one4" onclick="setTab('one',4,4)">新闻4</li></ul></div>
对着这个地方看,传进去name='one' 然后获取id为'one'+i的控件,也就是遍历所有li
cursel判断是第几个,你看每个li的第二个参数
判断如果点击的是当前的li则将对应的con_one_i的div层隐藏或显示,并将当前的li的class换成hover
三目判断 。
if(i==cursel){con.style.display="block";}
else{con.style.display="none";}
括号里的是不是代表'one',1,4 呢?
是个什么意思呢?