Показать содержимое вкладки - 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> 
         ...

содержимое Вторая вкладка являются унд эр подразделение 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>

Раздел Tab

<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

Вы проверили css второго содержимого вкладки с инспектором браузера (F12)? Помимо недействительного html, я не вижу ничего плохого. –

При проверке, как вы упомянули, подразделение addNewMaterial было встроено в подразделение addRequest. Следовательно, при настройке свойства отображения деления addRequest на none и addNewMaterials свойство отображения разделов показать, что свойство было переопределено, а не diplaying обоих. СПАСИБО МИЛЛИОН за предложение. У меня исправлено –

Попробуйте поместить код ниже в код java-script. Я пытаюсь создать код jsfiddle, используя ваш код. Извините за плохое формирование в jsfiddle, но вы можете видеть, что окно вывода работает нормально. проверьте мои fiddle

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

источник

2016-07-28 08:37:38

Надеюсь, это полезно для лет ... !!! –

Проблема заключалась в том, что теги встроены друг в друга. Вторая вкладка была переопределена первым свойством отображения. Спасибо, в любом случае –

Показать содержимое вкладки - Javascript

ответ

Смежные вопросы