如何隐藏主页div当点击另一个标签
问题描述:
我正在使用w3schools如何 - 制表符为我的网站制作标签。问题是,每当我点击'Home'以外的标签时,'Home'div仍然出现,另一个标签的内容也出现在它下面。点击其他选项卡时,如何隐藏主页div,我只看到提到的选项卡的内容?如何隐藏主页div当点击另一个标签
这里是我的导航HTML代码和JavaScript我使用:
<script type="text/javascript" >
\t function openTab(evt, tabName) {
\t // Declare all variables
\t var i, tabcontent, tablinks;
\t // Get all elements with class="tabcontent" and hide them
\t tabcontent = document.getElementsByClassName("tabcontent");
\t for (i = 0; i < tabcontent.length; i++) {
\t tabcontent[i].style.display = "none";
\t }
\t // Get all elements with class="tablinks" and remove the class "active"
\t tablinks = document.getElementsByClassName("tablinks");
\t for (i = 0; i < tablinks.length; i++) {
\t tablinks[i].className = tablinks[i].className.replace(" active", "");
\t }
\t // Show the current tab, and add an "active" class to the link that opened the tab
\t document.getElementById(tabName).style.display = "block";
\t evt.currentTarget.className += " active";
\t \t }
\t \t </script>
\t \t <script type="text/javascript">
\t \t \t
\t \t </script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ben and Lukes</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#intro" class="tablinks active" onclick="openTab(event, 'intro')">Home</a></li>
<li><a href="#About" class="tablinks" onclick="openTab(event, 'About')">About Us</a></li>
<li><a href="#Products" class="tablinks" onclick="openTab(event, 'Products')">Products</a></li>
<li><a href="#Contact" class="tablinks" onclick="openTab(event, 'Contact')">Contact Us</a></li>
</ul>
</div>
</nav>
答
简化您的JS
JS
openTab("Home")
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
然后HTML应该是这个样子
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<ul class="w3-navbar w3-black">
<li><a href="#" onclick="openTab('Home')">Home</a></li>
<li><a href="#" onclick="openTab('AboutUs')">About Us</a></li>
<li><a href="#" onclick="openTab('Products')">Products</a></li>
<li><a href="#" onclick="openTab('ContactUs')">Contact Us</a></li>
</ul>
<div id="Home" class="w3-container tab">
<h2>Home</h2>
<p>Your Content Here</p>
</div>
<div id="AboutUs" class="w3-container tab">
<h2>About Us</h2>
<p>Your Content Here</p>
</div>
<div id="Products" class="w3-container tab">
<h2>Products</h2>
<p>Your Content Here</p>
</div>
<div id="ContactUs" class="w3-container tab">
<h2>Contact Us</h2>
<p>Your Content Here</p>
</div>
答
尝试使用一些jQuery的:
$(".otherTab").click(function(){
$('.homeTab').hide();
$('.otherTab').show();
});
答
,如果你不想使用jQuery的你可以使用ng-switch directive。你会在控制器上有一些状态,如displayTab = 0。然后点击标签上会改变那块状态,然后NG-开关会显示正确的选项卡
我要澄清,磨片ñ我启动我想要主页出现的网站。主页由一个简单的div与容器/背景图像等和图像组成。随后,当点击一个标签时,例如“关于我们”,我想让“关于我们”标签的内容出现,并且“主页”页面内容消失。 – PS97
你检查出笔吗?那不是你的意思? – Illdapt
我的歉意,我只是做了,而这正是我正在寻找的,我会尝试使用您的代码再次建模。我可能必须完全转储我的代码并重新构建框架。我会让你知道它是怎么回事:) – PS97