0

我有显示/隐藏 div 而不是加载新页面的 Javascript 选项卡。选项卡的样式可以产生悬停效果。我现在想添加一个活动样式来匹配当前可见的 div。

JAVASCRIPT，它不能工作，因为它来自加载页面的版本：

function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i < aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href) >= 0) {
      aObj[i].className='active';
    }
  }
}

function showdiv(id){
document.getElementById(id).style.display = "block";
}

function hidediv(id){
document.getElementById(id).style.display = "none";
}

样式：

#pageAdmin { display:block; }
#userAdmin { display:none; }

的HTML：

<ul id="nav">
    <li><a onclick="showdiv('pageAdmin'); hidediv('userAdmin')" 
          href="#">Page Admin</a></li>
    <li><a onclick="showdiv('userAdmin'); hidediv('pageAdmin')" 
          href="#">User Admin</a></li>
</ul>


<div id="pageAdmin">
    <h1>Page admin</h1>
</div>

<div id="userAdmin">
    <h1>User admin</h1>
</div>

这是我关于 SO 的第一个问题，所以我希望它是适当的 - 如果不是，请提前接受我的道歉！

4

1 回答 1

0

您的 setActive 功能不是很有帮助。并且使用位置、href 和哈希将很难做你想做的事。

您可以将脚本更改为

function showdiv(id){
  var el = document.getElementById(id);
  el.style.display = "block";
  el.className = "active";
}

function hidediv(id){
  var el = document.getElementById(id);
  el.style.display = "none";
  el.className = "";
}

现在它应该做你想做的事。

但是，您应该看一下jQuery。使用 jQuery，您确实消除了 getElementById 的使用，并且您可以更简单地为 onclick 附加一个事件处理程序，就像使用 vanilla js 一样。在 html 属性中设置处理程序被认为是不好的做法。如果您想使用多种样式，jQuery 还会处理您拆分和连接空格分隔的 className 字符串。

使用 jQuery 它看起来像：

$("a", "#nav").click(function () {
  var $navA = $(this);
  var tabName = $navA.attr("data-tabName");

  $(".tab").each(function () {
    var $tab = $(this);
    if ($tab.attr("id") === tabName) {
      $tab.css({ display: 'block' }); // you may move this into active style
      $tab.addClass("active");
      $tab.removeClass("inactive");
    }
    else {
      $tab.css({ display: 'none' }); // you may move this into inactive style
      $tab.removeClass("active");
      $tab.addClass("inactive");
    }
  });
});

jQuery 示例的 HTML

<ul id="nav">
    <li><a data-tabName="pageAdmin" href="#">Page Admin</a></li>
    <li><a data-tabName="userAdmin" href="#">User Admin</a></li>
</ul>

<div class="tab" id="pageAdmin">
    <h1>Page admin</h1>
</div>
<div class="tab" id="userAdmin">
    <h1>User admin</h1>
</div>
于 2012-07-11T13:19:08.537 回答