<!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>

解决方案 »

  1.   

    function setTab(name,cursel,n)// name,cursel,n这个是什么意思呢?
    {
     for(i=1;i<=n;i++)
    {
     name,cursel,n是setTab的参数;也就是说有3个参数
      

  2.   

    <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>
    对着这个地方看,传进去name='one' 然后获取id为'one'+i的控件,也就是遍历所有li
    cursel判断是第几个,你看每个li的第二个参数
    判断如果点击的是当前的li则将对应的con_one_i的div层隐藏或显示,并将当前的li的class换成hover
      

  3.   

    con.style.display=i==cursel?"block":"none";
    三目判断 。
    if(i==cursel){con.style.display="block";}
    else{con.style.display="none";}
      

  4.   

    function setTab(name,cursel,n)
    括号里的是不是代表'one',1,4 呢?
      

  5.   

    i==cursel?
    是个什么意思呢?
      

  6.   

    i==cursel?"block":"none"合起来是三目运算,等价于if判断的那句话意思
      

  7.   

    .display是个什么意思呢?能具体点吗?
      

  8.   

    style属性,display="none"隐藏,display=""显示
      

  9.   

    前面问错了...我是想问cursel...