我正在尝试制作标签按钮。并将标签上的文字作为标题。如果我点击选项卡,标签上的标题应该随标签内容更改。现在我的代码中如果我点击第一个标签标题出现,但如果我点击在第二个标签上,然后第一个标签的标题不隐藏,第二个标签的标题出现。但我希望第一个标题隐藏在第二个标签上点击。帮助我!!
<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>
答案 0 :(得分: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>
答案 1 :(得分:1)
在你的函数中,你显示下一个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
}
答案 2 :(得分:1)
在你的函数中尝试这个 -
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";
}
答案 3 :(得分:1)
您可以尝试以下方法:
<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()
})
&#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
参数。yess1
和yess2
。initializeUI
函数来确定初始状态。bootstrap
,因此请使用课程.hide
代替style.display
。