单击另一个选项卡时如何隐藏主页div答案

【问题标题】：How to hide a main page div when clicking on another tab单击另一个选项卡时如何隐藏主页div
【发布时间】：2016-09-20 02:10:41
【问题描述】：

我正在使用 w3schools HOW TO - 选项卡为我的网站制作选项卡。问题是，每次我单击“主页”以外的选项卡时，仍然会出现“主页”div，并且其他选项卡的内容也出现在其下方。单击其他选项卡时如何隐藏主页 div，以便我只看到提到的选项卡的内容？

这是我正在使用的导航 HTML 代码和 JavaScript：

<script type="text/javascript" >
	    function openTab(evt, tabName) {
	    // Declare all variables
	    var i, tabcontent, tablinks;

	    // Get all elements with class="tabcontent" and hide them
	    tabcontent = document.getElementsByClassName("tabcontent");
	    for (i = 0; i < tabcontent.length; i++) {
	        tabcontent[i].style.display = "none";
	    }

	    // Get all elements with class="tablinks" and remove the class "active"
	    tablinks = document.getElementsByClassName("tablinks");
	    for (i = 0; i < tablinks.length; i++) {
	        tablinks[i].className = tablinks[i].className.replace(" active", "");
	    }

	    // Show the current tab, and add an "active" class to the link that opened the tab
	    document.getElementById(tabName).style.display = "block";
	    evt.currentTarget.className += " active";
		}
		</script>
		<script type="text/javascript">
			
		</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>

【问题讨论】：

标签： javascript html css tabs

【解决方案1】：

简化你的 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>

查看Live CODEPEN here

【讨论】：

我应该澄清一下，当我启动网站时，我希望主页出现。主页由一个带有容器/背景图像等的简单 div 和一个图像组成。随后，当单击选项卡时，例如“关于我们”，我希望“关于我们”标签内容出现，“主页”页面内容消失。
你检查过钢笔吗？这不是你的意思吗？
抱歉，我刚刚做到了，这正是我正在寻找的，我将尝试使用您的代码再次对其进行建模。我可能不得不完全转储我的代码并重新制作框架。我会让你知道它是怎么回事:)
Illdapt 效果很好，但是在加载网站时，每个 div 都是可见的，并且在我单击选项卡之前，所有内容都不会隐藏，然后代码就会启动。是否有某种 onLoad页面加载时自动单击“主页”选项卡的功能？非常感谢:)
是的。将脚本放在$( document ).ready(function() { YOUR CODE HERE }); 中注意这使用JQUERY，您必须在HTML 上的其他<script> 之前添加以下内容：<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

【解决方案2】：

尝试使用一些 jQuery：

$(".otherTab").click(function(){
      $('.homeTab').hide();
      $('.otherTab').show();
});

【讨论】：

【解决方案3】：

如果你不想使用 jquery，你可以使用ng-switch directive。然后，您将在控制器上拥有一些状态，例如 displayTab = 0 默认情况下。单击选项卡会更改该状态，然后 ng-switch 将显示正确的选项卡

【讨论】：