凝聚javascript

Question

我並不是一個JavaScript程序員，但我已經想出了一種創建選項卡區域的方法（即單擊一個選項卡顯示不同的DIV內容），但我的代碼看起來非常龐大。想知道是否有人可以啓發我如何濃縮一些。

這裏的HTML：

<aside id="sb-popular"> 
    <p class="sb-popular-nav"> 
    <a id="sbpt1" class="current" href="javascript:showdiv('sbp-latest'); hidediv('sbp-commented'); hidediv('sbp-popular'); hidediv('sbp-views'); tabset('sbpt1'); taboff('sbpt2'); taboff('sbpt3'); taboff('sbpt4');">Latest</a> 
    <a id="sbpt2" href="javascript:showdiv('sbp-commented'); hidediv('sbp-latest'); hidediv('sbp-popular'); hidediv('sbp-views'); tabset('sbpt2'); taboff('sbpt1'); taboff('sbpt3'); taboff('sbpt4');">Commented</a> 
    <a id="sbpt3" href="javascript:showdiv('sbp-popular'); hidediv('sbp-commented'); hidediv('sbp-latest'); hidediv('sbp-views'); tabset('sbpt3'); taboff('sbpt1'); taboff('sbpt2'); taboff('sbpt4');">Popular</a> 
    <a id="sbpt4" href="javascript:showdiv('sbp-views'); hidediv('sbp-commented'); hidediv('sbp-popular'); hidediv('sbp-latest'); tabset('sbpt4'); taboff('sbpt2'); taboff('sbpt3'); taboff('sbpt1');">Views</a> 
    </p> 
    <div id="sbp-latest"> 
    Content here 
    </div> 
    <div id="sbp-commented"> 
    Content here 
    </div> 
    <div id="sbp-popular"> 
    Content here 
    </div> 
    <div id="sbp-views"> 
    Content here 
    </div> 
</aside> 

正如你所看到的JavaScript有一個有點笨拙。這是我的JS。

function hidediv(d) { document.getElementById(d).style.display = "none"; } 
function showdiv(d) { document.getElementById(d).style.display = "block"; } 
function tabset(d) { document.getElementById(d).style.color = "white";} 
function taboff(d) { document.getElementById(d).style.color = "black";} 

Answer 1

首先你需要考慮制定一個初始化函數，將隱藏所有標籤

，並顯示默認選項卡。

然後在每個節目的功能，你需要得到顯示選項卡隱藏，然後顯示它

你點擊的選項卡。

你的開始是好的保持它未來的人！

Answer 2

1）在href中調用javascript並不被認爲是好的做法。相反，使用onclick並返回false：

function showDiv() { 
    . 
    . 
    . 
    return false 
} 

使用

<a href="#" onclick="return showDiv('....')" 

2）你可以使用

window.onload=function() { 
    var links = document.getElementById('sb-popular').document.getElementsByTagName('a'); 
    for (...) { 
    links[i].onclick=function() { 
     .. 
     .. 
     .. 
    } 
    } 
}