tab功能菜单——使用tab之间不同的交换机div

需求：在web实现类型的接口tab标签效应

aspx界面代码：

js代码：
//控制操作tab的高亮显示 參数(one,索引號：1開始)
function setTab(name, cursel) {
    for (var i = 1; i <= links_len; i++) {
        var menu = document.getElementById(name + i);
        var menudiv = document.getElementById("con_" + name + "_" + i);
        if (i == cursel) {
            menu.className = "off";
            menudiv.style.display = "block";
        }
        else {
            menu.className = "";
            menudiv.style.display = "none";
        }
        document.getElementById("hidfTagHistory").value = cursel;
    }
}
css代码：
/*----------------tab页签---------------------*/
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.tab1{281px;border-top:#aec7e5 solid 1px;border-bottom:#aec7e5 solid 1px; margin-top:20px auto 0 auto;}
.menu{height:28px;border-left:#cccccc solid 1px; 280px;}
.menu li{float:left;69px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-right:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}
.menu li.off{background:#3385ff;color: White;font-weight:bold;}
.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
/*--------------------button--------------------------*/
.menudiv input[type="text"]{
    120px;
    height:16px;
 padding: 4px 2px;
 float: left;    
 font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
 border: 1px solid #ccc;
 box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
 border-radius: 3px;    
}
 .menudiv span {
        color:blue;
        margin:2px;
        height:20px;
        line-height:20px;
}
.lnkBtn
{
      1024px; margin-left: auto; margin-right: auto;
     height:26px;
     line-height:26px;
     clear:left;
     background-color:white;
}
.lnkBtn a{
    margin-left:20px;
    font-size:14px;
}
.lnkBtn a:hover{
   color:red;
}
 .lnkBtn a:visited {
    color: #9900FF
}
注意id的命名是有讲究的，每个li相应着一个div，这样就能够依据点击不通的li显示不同的div，然后js控制li的css显示。让点击li突出。



    
        
         
            
版权声明：本文博客原创文章，博客，未经同意，不得转载。