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。
然后根据当前元素，仅显示需要显示的元素。

<强>示例

＆＃13;

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()
})

＆＃13;

<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>

＆＃13;

指针

最好避免在HTML中添加处理程序。使用.addEventListener将允许您使代码更加模块化。 .addEventListener还会将this绑定到当前元素，并为您提供event参数。
创建一个带有1个参数并进行必要更改的通用方法，而不是yess1和yess2。
这是我个人的POV，但最好有一个initializeUI函数来确定初始状态。
由于您已在使用bootstrap，因此请使用课程.hide代替style.display。

如何隐藏和显示标签上的文字点击

4 个答案:

观

指针