显示选项卡内容 - Javascript

我正在使用JS功能，其中有一个选项卡式面板，每个选项卡在相同的HTML文件中打开一个分区。我已经设置了默认显示的第一个选项卡（这些内容在页面加载时将处于活动状态）。但是当我尝试点击第二个选项卡时，我指定的选项卡内容不会显示。显示选项卡内容 - Javascript

被每个选项卡下会显示HTML表单

第一个标签的内容是分工下addRequest师

<div id="addRequest" class="tabcontent"> 

<div id="form_container"> 

<!--<h1><a>Acquisition</a></h1>--> 
<form id="form_1147240" class="appnitro" method="post" action=""> 
    <div class="form_description"> 
     <h2>Acquisition</h2> 
     <p>Enter the details of the material required</p> 
    </div> 
    <ul > 

     <div id="leftDiv" style="float: left; width: 50%;" > 

      <!--Material Type--> 

      <li id="li_7" > 
       <label class="description" for="element_7">Material Type </label> 
       <div class = "listItems"> 
        <select class="element select medium" id="element_7" name="element_7"> 
         <option value="" selected="selected"></option> 
         <option value="1" >Books</option> 
         ...

第二个选项卡的内容是UND呃分工addNewMaterial师

<div id="addNewMaterial" class="tabcontent"> 
    <div id="form_container1"> 
     <form id="form_11472401" class="appnitro" method="post" action=""> 
      <div class="form_description"> 
       <h2>Acquisition</h2> 
       <p>Enter the details of the new material</p> 
      </div> 
      <ul > 

       <div id="leftDiv1" style="float: left; width: 50%;" > 

        <!--Material Type--> 

        <li id="li_71" > 
         <label class="description" for="element_71">Material Type </label> 
         <div class = "listItems"> 
          <select class="element select medium" id="element_71" name="element_71"> 
           <option value="" selected="selected"></option> 
           <option value="1" >Books</option>

选项卡部分

<body> 

<ul class="tab"> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'addRequest')">Add Request</a></li> 
    <li><a href="#" class="tablinks" onclick="openTab(event, 'addNewMaterial')">New Materials</a></li> 
</ul> 
<div id="addRequest" class="tabcontent"> 
<div id="form_container">

JS功能

function openTab(evt, divisionId) { 
// 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(divisionId).style.display = "block"; 
evt.currentTarget.className += " active"; 
}

来源

2016-07-28 Nayantara Jeyaraj

您是否使用浏览器检查器（F12）检查了第二个标签内容的CSS？除了无效的HTML，我没有看到任何错误。 –

正如您所提到的那样检查时，addNewMaterial部门被嵌入在addRequest部门中。因此，在将addRequest分区的display属性设置为none并将addNewMaterials分区的display属性设置为显示该属性时，该属性正在被覆盖，而不是两者都显示。感谢百万的建议。得到它固定 –

试着把下面的代码放到你的java脚本代码中。我正在尝试使用您的代码创建jsfiddle。对不起，在jsfiddle错误格式化，但你可以看到输出窗口工作正常。看看我的fiddle

document.getElementById('addRequest').style.display = "block"; 
document.getElementById('addNewMaterial').style.display = "none";

来源

2016-07-28 08:37:38

我希望它有用的同比... !!! –

问题在于标记彼此嵌入。第二个选项卡被第一个显示属性覆盖。不管怎么说，还是要谢谢你 –

显示选项卡内容 - Javascript

回答

相关问题