Question

我正在使用w3schools HOW TO - 标签为我的网站制作标签。问题是，每次我点击＆＃39; Home＆＃39;以外的标签，＆＃39; Home＆＃39; div仍会出现，其他标签的内容也会显示在其下方。如何在单击其他选项卡时隐藏主页div，以便我只看到提到的选项卡的内容？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试使用一些jQuery：

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

Answer 2

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

Answer 3

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

查看Live CODEPEN here

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

3 个答案: