1

私は 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";}
4

2 に答える 2

1

1) href で javascript を呼び出すことはお勧めできません。代わりに onclick を使用して false を返します。

function showDiv() {
  .
  .
  .
  return false
}

使用して

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

2）を使用して、頭の中でonclickを割り当てることができます

window.onload=function() {
  var links = document.getElementById('sb-popular').document.getElementsByTagName('a');
  for (...)  {
    links[i].onclick=function() {
      ..
      ..
      ..
    }
  }
}
于 2012-09-24T14:32:54.687 に答える
0

最初に、すべてのタブを非表示にする init 関数を作成することを検討する必要があります

デフォルトのタブを表示します。

次に、各表示機能で、表示されたタブを取得して非表示にしてから表示する必要があります

クリックしたタブ。

あなたのスタートは良いです、それを続けてください！

于 2012-09-24T13:26:20.650 に答える