如何在选项卡上单击隐藏和显示文本

Question

我正在尝试制作选项卡按钮。并将文本放在选项卡上作为标题。如果我单击选项卡，则选项卡上的标题应随选项卡内容而变化。然后第一个选项卡的标题不隐藏，第二个选项卡的标题出现。但是我想第一个选项卡上的第一个标题隐藏。单击帮助我！

<script>
    function yess1(){
    document.getElementById("h1").style.display = "inline";
    }
     function yess2(){
      document.getElementById("h2").style.display = "inline";
     }
  </script>

  <style>
    #h1{
      display:none;
    }
    #h2{
      display:none;
    }
  </style>
  <div class="container">
  <h3 id="h1">All Students</h3>
  <h3 id="h2" >All Teachers</h3>


  <ul class="nav nav-tabs">
    <li class="active"><a onclick="yess1();" data-toggle="tab"     href="#one">Student</a></li>
    <li><a onclick="yess2();" data-toggle="tab" href="#two">Teacher</a></li>
  </ul>
  <br>
  <div class="tab-content">
    <p id="one" class="tab-pane fade in active">This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.    </p>
    <p id="two" class="tab-pane fade in active">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam efficitur ut risus id egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nullam posuere sapien et sapien aliquam.
    </p>
  </div>
</div>

Answer 1

在您的Javascript中尝试以下代码：

<script>
    function yess1(){
        document.getElementById("h2").style.display = "none";
        document.getElementById("h1").style.display = "inline";
        }
         function yess2(){
          document.getElementById("h1").style.display = "none";
          document.getElementById("h2").style.display = "inline";
         }
</script>

Answer 2

与您的函数一样，您正在显示下一个div，但没有隐藏前一个div。 您必须先隐藏然后再显示。

请使用以下代码-

function yess1(){
  document.getElementById("h1").style.display = "inline";
  document.getElementById("h2").style.display = "none"; //Hiding Second 
}
function yess2(){
  document.getElementById("h2").style.display = "inline";
  document.getElementById("h1").style.display = "none"; //Hiding first
}

Answer 3

在您的功能中尝试-

JAVASCRIPT-

function yess1(){
    document.getElementById("h2").style.display = "none";
    document.getElementById("h1").style.display = "inline";
  }
  function yess2(){
    document.getElementById("h1").style.display = "none";
    document.getElementById("h2").style.display = "inline";
  }

Answer 4

您可以尝试以下方法：

理念

• 单击<a> ，隐藏所有.tab-pane和h3 。
• 然后基于当前元素，仅显示需要显示的元素。

样品

 function registerTabEvents(){ var tabs = document.querySelectorAll('.tab'); for(var i = 0; i< tabs.length; i++){ tabs[i].addEventListener("click", toggleTab) } } function toggleTab(e){ var tab = e.target.getAttribute('href').replace(/[^\\w]/g, ''); // Hide all elements hideAllElements('.tab-pane'); hideAllElements('h3'); // Show element to show document.querySelector("#" + tab).style.display = "inline-block"; document.querySelector("#h_" + tab).style.display = "inline-block"; } function hideAllElements(selector){ var tabs = document.querySelectorAll(selector); for(var i = 0; i< tabs.length; i++){ tabs[i].style.display = "none"; } } function initializeUI(){ hideAllElements('.tab-pane'); hideAllElements('h3'); } window.addEventListener('load', function(){ registerTabEvents(); initializeUI() }) 

 <div class="container"> <h3 id="h_one">All Students</h3> <h3 id="h_two">All Teachers</h3> <ul class="nav nav-tabs"> <li class="active"><a class="tab" data-toggle="tab" href="#one">Student</a> </li> <li><a class="tab" data-toggle="tab" href="#two">Teacher</a> </li> </ul> <br> <div class="tab-content"> <p id="one" class="tab-pane fade in active">This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p> <p id="two" class="tab-pane fade in active"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam efficitur ut risus id egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nullam posuere sapien et sapien aliquam. </p> </div> </div> 

指针

• 最好避免在HTML添加处理程序。 使用.addEventListener可以使您的代码更具模块化。 .addEventListener也与this当前元素，并为您提供一个event参数。
• 代替yess1和yess2 ，创建一个接受1个参数并进行必要更改的通用方法。
• 这是我的个人POV，但最好使用initializeUI函数来确定初始状态。
• 既然你已经在使用bootstrap ，使用类.hide代替style.display 。