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;

}