如何显示所选标签的内容并隐藏其他标签的内容？

Question

我希望默认显示第一个标签内容，但是该标签的内容被隐藏并且仅在单击该标签后才显示。

 function opentabs(evt, tabName) {
    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(tabName).style.display = "block";
     evt.currentTarget.className += " active";
    
  }
  
   function opensubtabs(evt, SubTabName) {
    var i, content, links;
   
    content = document.getElementsByClassName("tab-content");
    for (i = 0; i <content.length; i++) {
        content[i].style.display = "none";
    }
    links = document.getElementsByClassName("tablinks");
    for (i = 0; i <links.length; i++) {
        links[i].className =links[i].className.replace(" clicked", "");
      }
  
 

    document.getElementById(SubTabName).style.display = 'block';

    
   evt.currentTarget.className += " clicked";

}

<div id="tabs">
<ul >
  <li class="tablinks active" onclick="opentabs(event, 'Tab1');"><a href="#">Tab1</a></li>
  <li class="tablinks" onclick="opentabs(event, 'Tab2')"><a href="#">Tab2</a></li>
  <li class="tablinks" onclick="opentabs(event, 'Tab3')"><a href="#">Tab3</a></li>
  <li class="tablinks" onclick="opentabs(event, 'Tab4')"><a href="#">Tab4</a></li>
  <li class="tablinks" onclick="opentabs(event, 'Tab5')"><a href="#">Tab5</a></li>
  </ul>
  </div>
  
  <div id="Tab1" class="tabcontent"  style="display:block;">
        
          <ul>
           <li class="tablinks clicked" onclick="opensubtabs(event, 'SubTab1')"><a href="#" style="width:100px;">Sub1</a></li>
           <li class="tablinks" onclick="opensubtabs(event, 'SubTab2')"><a href="#" style="width:100px;">Sub2</a></li>
           <li class="tablinks" onclick="opensubtabs(event, 'SubTab3')"><a href="#" style="width:100px;">Sub3</a></li>
           <li class="tablinks" onclick="opensubtabs(event, 'SubTab4')"><a href="#" style="width:100px;">Sub4</a></li>
           <li class="tablinks" onclick="opensubtabs(event, 'SubTab5')"><a href="#" style="width:100px;">Security</a></li>
           </ul>
           <div id="SubTab1" class="tab-content"  style="display:block; ">
             <p>This is subtab 1!</p>
           </div>
           <div id="SubTab2" class="tab-content">
           <p>.......</p>
           </div>
           so on... till sub5
           
           
           
           
           <div id="Tab2" class="tabcontent"
          <ul>
           <li class="tablinks clicked"onclick="opensubtabs(event, 'SubTab6')"><a href="#" style="width:100px;">sub6</a></li>
           <li class="tablinks" onclick="opensubtabs(event, 'SubTab7')"><a href="#" style="width:100px;">sub7</a></li>
           <div id="SubTab6" class="tab-content"  style="display: block">
           
              <p>This is sub6 !</p>
               </div>
               <div id="sub7" class="tab-content">
               <p>This is sub7</p>
               <div>
               
               
               
               and so on....

我希望显示sub1和sub6而不单击它。如果单击其他子选项卡并返回到sub1，则除非单击该选项卡，否则不会显示该子选项卡。有什么建议吗？

Answer 1

<li class="tablinks clicked"  style="display:block" onclick="opensubtabs(event, 'SubTab1')">
  <a href="#" style="width:100px;">Sub1</a>
</li>

将style="display:block"插入要在页面加载中显示的li tabcontent，而无需单击事件。