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) It is not considered good practice to call javascript in the href. Instead use onclick and return false:

function showDiv() {
  .
  .
  .
  return false
}

using 

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

2) you can assign the onclick in the head using

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

首先，您需要考虑创建一个将隐藏所有选项卡的初始化函数

并显示默认选项卡。

然后在每个显示功能中，您需要将显示的选项卡隐藏然后显示

您单击的选项卡。

你的开始很好，继续前进！

于 2012-09-24T13:26:20.650 回答