这个是从网络找来的JS+CSS内页内容切换选项卡,另外有纯CSS内页内容切换选项卡代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JS+CSS内页内容切换选项卡</TITLE>
</HEAD>
<style>
/*为什么要这样定义样式,而不用#cardBar ul 这样定义,我个人的猜测是因为类是就近原则获取样式,而#cardBar ul则不是就近原则,按标签来定义,因此.Selected样式就无法出现。*/
*{
    margin:0px;
    padding:0px;
    text-decoration:none;
}
/*定义基本样式*/
ul.cardUl{
    font-size:12px;
    list-style-type:none;
    text-align:center;
    height:29px;
    background-image:url(attachments/month_0706/2200764172315.gif);
}
/*默认样式下使用css文件*/
ul.cardUl li{
    height:29px;
    background:url(attachments/month_0706/u200764172418.gif) left top no-repeat;
    float:left;
    margin-right:1px;
    padding-left:6px; /*另一边提供空间*/
}
ul.cardUl li a{
    float:left;
    height:29px;
    background:url(attachments/month_0706/y200764172443.gif) right top no-repeat;
    display:block;
    padding:8px 8px 3px 4px;/*让文字能够够居中*/
    color:#333;
    white-space: nowrap;
}
/*文字点击使用CSS*/
ul.cardUl li.Selected{
    background:url(attachments/month_0706/g20076417255.gif) left top no-repeat;
}
ul.cardUl li.Selected a{
    background:url(attachments/month_0706/z200764172528.gif) right top no-repeat;
}
/*对点击下栏显示边框的代码进行美化*/
div.hackBox{
    padding:2px 2px;
    border-left:2px solid #6697CD;
    border-right:2px solid #6697CD;
    border-bottom:2px solid #6697CD;
    display:none;
}
</style>
<script>
//为选项卡的默认值进行设定,方法为读取cardBar里面的li标签是否已经有selected属性,如果没有则使用默认值。
function loadTab(){
    //读取cardBar下面所有li标签
    var getId=document.getElementById("cardBar").getElementsByTagName("li");
    //定义一个判断是否有selected的变量
    var selectedItems=0;
    //判断方法,循环读出li标签的className,如果有则selectedItems加1
    for(i=0;i<getId.length;i++){
        if (getId[i].className == "Selected"){
            selectedItems+=1;
        }
    }
    //经过循环,如果selectedItems没有数值,那么说明没有selected的标签,因此给标签加上默认的className
    if (selectedItems==0){
        document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
        document.getElementById("Dcard1").style.display="block";
    }
}
//让窗口打开就运行他
window.onload=loadTab;
//设定结束
 
//进行选项卡效果的触发
function switchTab(cardBar,cardId){
    //读取cardBar下面所有li标签
    var oItems = document.getElementById(cardBar).getElementsByTagName("li");  
    //循环清空li标签下面的selected效果
    for (i=0;i<oItems.length;i++ ){
        var x=oItems[i];
        x.className="";
        var y=x.getElementsByTagName("a");
        y[0].style.color="#333";
    }
    //开始选项卡效果的赋值,为选中的li标签增加selected类的属性
    document.getElementById(cardId).className="Selected";
    //读出cardContent 下面的所有div标签
    var dvs=document.getElementById("cardContent").getElementsByTagName("div");
    //循环,判断应该显示的div
    for (i=0;i<dvs.length;i++ ){
        if (dvs[i].id==("D"+cardId)){
            dvs[i].style.display="block";
        }else{
            dvs[i].style.display="none";
        }
    }
}
</script>
<BODY>
<div id="aa">
    <ul  id="cardBar">
        <li id="card1"><a href="#"  onclick="javascript:switchTab('cardBar','card1');">第一选项</a></li>
        <li id="card2"><a href="#"  onclick="javascript:switchTab('cardBar','card2');">第二选项</a></li>
        <li id="card3"><a href="#"  onclick="javascript:switchTab('cardBar','card3');">第三选项</a></li>
        <li id="card4"><a href="#"  onclick="javascript:switchTab('cardBar','card4');">第四选项</a></li>
    </ul>
    <div id="cardContent">
        <div id="Dcard1">代码一</div>
        <div id="Dcard2">代码二</div>
        <div id="Dcard3">代码三</div>
        <div id="Dcard4">代码四</div>
    </div>
</div>
</BODY>
</HTML>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.