Question

在同一页面上使用两个ul标签元素时遇到问题。但是，如果在第二个ul元素上按下另一个ul tab元素，它们都可以工作，第一个元素消失了。

我非常有信心问题是，它隐藏了div：

       for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }

然而，我似乎无法用我尝试的各种方法来解决这个问题。所有帮助表示赞赏。

最诚挚的问候，帕特里克

Answer 1

这是因为你在整个内容中循环并设置点击的一个显示并休息以隐藏。

你应该做的是将两个标签分组在两个独立的div中，然后遍历div的子节点，其中li元素已被点击。

JSFIDDLE

在show function中

 function showTab() {

  **// this div contatins one tab group**       
  var parentDiv = this.parentNode.parentNode.parentNode;

  var selectedId = getHash( this.getAttribute('href') );

  **// loop only through the div of which li tab has been clicked**

  for ( var i = 0; i < parentDiv.childNodes.length; i++ ) {
    if ( parentDiv.childNodes[i].nodeName == "DIV" ) {
          var id = parentDiv.childNodes[i].getAttribute('id');

          // Highlight the selected tab, and dim all others.
          // Also show the selected content div, and hide all others.
          if ( id == selectedId ) {
              tabLinks[id].className = 'selected';
              contentDivs[id].className = 'tabContent';
          } else {
              tabLinks[id].className = '';
              contentDivs[id].className = 'tabContent hide';
          }
    }
  }
  // Stop the browser following the link
  return false;
}

并在html中

<div id="tab-group1"> code block for tab 1 </div>
<div id="tab-group2"> code block for tab 2 </div>

Answer 2

你应该对** ul **和tab元素本身使用单独的处理和id。我的猜测是 - 它只是在一个函数中处理两个制表符集，这意味着一次只能看到一个制表符（隐藏第一个ul中的制表符以显示第二个ul中的制表符。）

尝试分离处理，一切都应该有效。

使用js同时显示两个ul选项卡

2 个答案: