js经验分享

JS 在线压缩 ： http://ganquan.info/yui

因为一开始接触的就是jQuery，于是切实对Javascript了解的不是很深刻，不少方法都不会使用原生态的JS方法。由于jQuery封装了不少方法，因此不少时候用起来很方便。可是，在性能上却远不如原生的JS，由于须要带一个很大的jQuery库文件。  个人学习方法一开始就走反了，如今开始学习原生的js，一点一点积累吧！

一、实现简单的Tab切换
Js:

function selectTag(showContent,selfObj){
    // 操做标签
    var tag = document.getElementById("tags").getElementsByTagName("li");
    var taglength = tag.length;
    for(i=0; i<taglength; i++){
        tag[i].className = "";
    }
    selfObj.parentNode.className = "selectTag";
    // 操做内容
    for(i=0; j=document.getElementById("tagContent"+i); i++){
        j.style.display = "none";
    }
    document.getElementById(showContent).style.display = "block";
}

HTML:

<div id=con>
    <ul id=tags>
        <li class="selectTag"><a onClick="selectTag('tagContent0',this)" href="javascript:void(0)">热销基金</a> </li>
        <li><a onClick="selectTag('tagContent1',this)" href="javascript:void(0)">公司代销信息</a></li>
        <li><a onClick="selectTag('tagContent2',this)" href="javascript:void(0)">代销基金</a> </li>
        <li><a onClick="selectTag('tagContent3',this)" href="javascript:void(0)">基金课堂</a> </li>
        <li><a onClick="selectTag('tagContent4',this)" href="javascript:void(0)">公示信息</a> </li>
      <!--<div style="clear:both"></div>-->
    </ul>

    <div id=tagContent>
    <div class="tagContent selectTag" id="tagContent0">第一个标签的内容</div>
    <div class="tagContent" id="tagContent1">第二个标签的内容97站长网</div>
    <div class="tagContent" id="tagContent2">第三个标签的内容</div>
    <div class="tagContent" id="tagContent3">第四个标签的内容</div>
    <div class="tagContent" id="tagContent4">第五个标签的内容</div>
    </div>
</div>

CSS:

#con {
    font-size: 12px; 
    width: 600px;
}
#tags {
    padding: 0px; 
    width: 400px; 
    float:left;
}
#tags li {  
    float: left;    
    list-style-type: none; 
}
#tags li a {
    padding:0 10px 0 10px; 
    float: left; 
    color: #999; 
    line-height: 23px; 
    height: 25px; 
    text-decoration: none;
    border-top:solid 1px #CCC;
    border-right:solid 1px #CCC;
    margin-bottom: -2px;
}
#tags li.selectTag {
    margin-bottom: -2px;
    background-color:#fff;
    position: relative; 
    height: 25px;
    border-bottom:0px;
}
#tags li.selectTag a {
    color: #000; 
    line-height: 25px; 
    height: 25px;

}
.tagContent {
    padding: 10px; 
    display: none; 
    width: 576px; 
    color: #474747; 
    height: 250px;
}
#tagContent {
    border: #aecbd4 1px solid; 
    float:left;
    background-color: #fff;
}
#tagContent div.selectTag {
    display: block;

}