顯示選項卡內容 - 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

回答

相關問題