Question

我有一个javascript函数可以有标签。现在我希望在其中一个标签中有标签。但每次我点击特定标签中的一个标签时，一切都会消失。这是因为我使用的javascript函数将style.display设置为无。

我想要的是，当点击POP或doel1或doel2内doel3时，style.display POP保持有效状态

这是我的javascript函数（来自w3school.com）：

＆＃13;

function openTab(evt, openTab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(openTab).style.display = "block";
  evt.currentTarget.className += " active";
}

＆＃13;

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

＆＃13;

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
  <button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
  <button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
  <h2>bla</h2>
  <table>
    <tr>
      <td>My stuff that works :)</td>
    </tr>
  </table>
</div>
<div id="blabla" class="tabcontent">
  <h3>blabla</h3>
  <table>
    <tr>
      <td>My stuff that works ;)</td>
    </tr>
  </table>
</div>

<div id="pop" class="tabcontent">
  <h1>POP</h1>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'doel1')">Doel 1</button>
    <button class="tablinks" onclick="openTab(event, 'doel2')">Doel 2</button>
    <button class="tablinks" onclick="openTab(event, 'doel3')">Doel 3</button>
  </div>
  <div id="doel1" class="tabcontent">
    My stuff that doesn't show when I want :(
  </div>
</div>

＆＃13;

Answer 1

看看这是否适合作为解决方案，我所做的是在函数中添加另一个参数，指示它是否为子选项卡。如果是，请保持父母活动并使孩子也活跃

function openTab(evt, openTab, subTab) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    if(subTab) {
      var parent = evt.currentTarget.closest('.tabcontent');
      parent.style.display = "block";
      parent.className += " active";
    }
    document.getElementById(openTab).style.display = "block";
    evt.currentTarget.className += " active";

}

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}


.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}


.tab button:hover {
background-color: #ddd;
}


.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
    <button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
    <button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
    <h2>bla</h2>
    <table>
        <tr><td>My stuff that works :)</td></tr>
    </table>
</div>
<div id="blabla" class="tabcontent">
    <h3>blabla</h3>
    <table>
        <tr><td>My stuff that works ;)</td></tr>
    </table>
</div>

<div id="pop" class="tabcontent">
    <h1>POP</h1>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'doel1',true)">Doel 1</button>
        <button class="tablinks" onclick="openTab(event, 'doel2', true)">Doel 2</button>
        <button class="tablinks" onclick="openTab(event, 'doel3', true)">Doel 3</button>
    </div>
    <div id="doel1" class="tabcontent">
        My stuff that doesn't show when I  want :(
    </div>

    <div id="doel2" class="tabcontent">
        My stuff doel2
    </div>

    <div id="doel3" class="tabcontent">
        My stuff doel3
    </div>
</div>

Answer 2

我在这里捅了一下，基本的改变是针对你想要改变的标签：

HTML：

<div class="tabs">
  <ul>
    <li>
      <button class="tablink active" onclick="openTab(event, 'tab1', 'parent')">
        Tab 1
      </button>
    </li>
    <li>
      <button class="tablink" onclick="openTab(event, 'tab2', 'parent')">
        Tab 2
      </button>
    </li>
    <li>
      <button class="tablink" onclick="openTab(event, 'tab3', 'parent')">
        Tab 3
      </button>
    </li>
  </ul>
</div>

<div id="tab1" class="parent active">
  <h2>Tab 1</h2>
</div>

<div id="tab2" class="parent">
  <h2>Tab 2</h2>
</div>

<div id="tab3" class="parent">
  <h2>Tab 3</h2>
  <div class="tabs">
    <ul>
      <li>
        <button class="subtablink active" onclick="openTab(event, 'tab1', 'child')">
          Tab 3a
        </button>
      </li>
      <li>
        <button class="subtablink" onclick="openTab(event, 'tab2', 'child')">
          Tab 3b
        </button>
      </li>
    </ul>
  </div>

  <div id="tab1" class="child active">
    <h2>Tab 3a</h2>
  </div>

  <div id="tab2" class="child">
    <h2>Tab 3b</h2>
  </div>

</div>

CSS：

.parent, .child {
  display:none;
}

.parent.active, .child.active {
  display: block;
}

.tablink.active, .subtablink.active {
  background: red;
}

使用Javascript：

function openTab(event, tab, set) {
  // Hide all tabs in scope
  const className = '.' + set;
  document.querySelectorAll(className).forEach(function(item) {
    item.className = set;
  });

  // Show selected tab
  const fullPath = className + '#' + tab;
  document.querySelector(fullPath).classList.add('active');

  // Set Tab to active (and deactivate others)
  const siblingClass = event.target.className;
  document.querySelectorAll('.' + siblingClass).forEach(function(item) {
    item.classList.remove('active');
  });
  event.target.classList.add('active');
}

我刚刚在这里添加了样式的基础。这是在行动：https://codepen.io/anon/pen/VyzWPQ

为了清楚起见，标签导航链接有自己的类（tablink＆amp; subtablink），具体取决于它们的范围，您当然可以根据需要命名它们，如果您在另一个父标签中有子标签，则需要。当单击一个按钮时，javascript使用它来取消设置兄弟姐妹的活动类。

Answer 3

function openTab(evt, openTab, subTab) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    if(subTab) {
      var parent = evt.currentTarget.closest('.tabcontent');
      parent.style.display = "block";
      parent.className += " active";
    }
    document.getElementById(openTab).style.display = "block";
    evt.currentTarget.className += " active";

}

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}


.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}


.tab button:hover {
background-color: #ddd;
}


.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
    <button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
    <button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
    <h2>bla</h2>
    <table>
        <tr><td>My stuff that works :)</td></tr>
    </table>
</div>
<div id="blabla" class="tabcontent">
    <h3>blabla</h3>
    <table>
        <tr><td>My stuff that works ;)</td></tr>
    </table>
</div>

<div id="pop" class="tabcontent">
    <h1>POP</h1>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'doel1',true)">Doel 1</button>
        <button class="tablinks" onclick="openTab(event, 'doel2', true)">Doel 2</button>
        <button class="tablinks" onclick="openTab(event, 'doel3', true)">Doel 3</button>
    </div>
    <div id="doel1" class="tabcontent">
        My stuff that doesn't show when I  want :(
    </div>

    <div id="doel2" class="tabcontent">
        My stuff doel2
    </div>

    <div id="doel3" class="tabcontent">
        My stuff doel3
    </div>
</div>

Thnx：）

使用JavaScript在没有jQuery的情况下在选项卡内部制

3 个答案: