JS 选项卡

最近在学习JavaScript，所以写了这个小东西。
初略的测试了一下，可以兼容标准浏览器（FF,CH,OP,IE8+）。
当然，如果想提高兼容性，只需要解决了 class属性 即可。
今后有空会继续完善。

预览效果：

JSTab Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.main{ width:960px; height:100%; margin:0 auto; background-color:#f2f2f2; overflow:auto;}
.box{ width:400px; height:100%; margin:100px 0; margin-left:280px;}
    .tit{ width:400px; height:30px; border:1px solid #ccc;}
        .tit div{ float:left; width:60px; height:30px; line-height:30px; color:#F0F0F0; margin-right:1px;}
            .hover{ background-color:#E6CAFF; cursor:pointer;}
            .out{background-color:#BE77FF;}
    .con{ width:400px; height:150px; border-color:#ccc; border-style:solid; border-width:0 1px 1px; font-size:14px;}
        .con div{ padding:8px;}
</style>
</head>

<body>
    <div class="main">
        <div class="box">
            <div id="title" class="tit">
                <div>标题一</div>
                <div>标题二</div>
                <div>标题三</div>
            </div>
            <div id="content" class="con">
                <div>
                    <h3>本教程是一个初级教程</h3>                    本教程为未接触过JavaScript的读者提供了比较完善的初级知识,但只限于初级知识:所有与动态网页密切相关的JavaScript在本教程中都未提及,包括动态定位、动画、让文档接收更多事件(document.captureEvent())等;所有在 IE 及 Netscape 中有不同的 JavaScript 都尽少提及。
                </div>
                <div>
                    <h3>本教程是一个参考教程</h3>
                    本教程在结构上设计的比较像一个参考(reference)，有参考的规划性，但又有教程的性质，所以我把它叫做"参考教程"。
                </div>
                <div>
                    <h3>参考式教程结构</h3>
                    理解能力不好或者依赖性强的读者可能学到JavaScript的核心——对象化编程时会觉得力不从心,因为它们不习惯这种参考式的文章;急于求成的读者
可能对本教程非常统一的参考式结构觉得厌恶,因为他们必须学到第三第四章才可以做一个小小的JavaScript。
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var $ =function(id){
    return document.getElementById(id);
},
ts = $("title").getElementsByTagName("div"),
cs = $("content").getElementsByTagName("div");
//初始化设置
for(var i=0;i<cs.length;i++){
    //为标题添加onmouseover事件
    ts[i].setAttribute("onmouseover","jsTab(this,"+i+")");
    //为内容添加ID属性
    cs[i].setAttribute("id","con"+i);
    //索引为0除外
if(i !=0){
        //隐藏内容
        cs[i].style.display ="none";
        //设置标题样式
        ts[i].setAttribute("class","out");
    }
    else
        //设置索引为0的标题样式
        ts[i].setAttribute("class","hover");    
}
function jsTab(obj,n){
    for(var i=0;i<ts.length;i++){
        //如选项满足条件，执行
if(i == n){
            ts[i].setAttribute("class","hover");
            $("con"+i).style.display ="block";
        }
        //否则
else{
            ts[i].setAttribute("class","out");
            $("con"+i).style.display ="none";
        }
    }
}
</script>
</html>

posted on 2011-10-28 20:54  FlyFishToMe  阅读(222)  评论(0)    收藏  举报

导航