如何隐藏主页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>

来源

2016-09-20 PS97

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

来源

2016-09-20 02:39:24 Illdapt

我要澄清，磨片ñ我启动我想要主页出现的网站。主页由一个简单的div与容器/背景图像等和图像组成。随后，当点击一个标签时，例如“关于我们”，我想让“关于我们”标签的内容出现，并且“主页”页面内容消失。 – PS97

你检查出笔吗？那不是你的意思？ – Illdapt

我的歉意，我只是做了，而这正是我正在寻找的，我会尝试使用您的代码再次建模。我可能必须完全转储我的代码并重新构建框架。我会让你知道它是怎么回事:) – PS97

尝试使用一些jQuery的：

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

来源

2016-09-20 02:23:33 Kylar

，如果你不想使用jQuery的你可以使用ng-switch directive。你会在控制器上有一些状态，如displayTab = 0。然后点击标签上会改变那块状态，然后NG-开关会显示正确的选项卡

来源

2016-09-20 02:26:48 Jake

如何隐藏主页div当点击另一个标签

回答

相关问题