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

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() {
      ..
      ..
      ..
    }
  }
}

Answer 2

首先你需要考虑制作一个隐藏所有标签的初始化函数

并显示默认标签。

然后在每个show函数中你需要显示选项卡隐藏它然后显示

您点击的标签。

你的开始是好的，保持它的到来！

冷凝javascript

2 个答案: