onglets dans les onglets en HTML/CSS et javascript?

Question

Je souhaite créer une vue à onglets en HTML. Mon problème est que l'un des onglets contient des onglets. Mon problème est que je ne sais pas comment m'assurer que les sous-onglets ne s'affichent que si je suis dans l'onglet Profil. Quelle est la meilleure façon d'y parvenir? Comment puis-je utiliser javascript pour mettre à jour la classe en conséquence et ne pas afficher les onglets? Toute aide serait reconnaissante. Mon code est

  <div class="tabheader"> 
      <ul> 
       <li><a href="#addprop_tab" title="">Add Property</a></li> 
       <li><a href="#savedprop_tab" title="">Saved Property</a></li> 
       <li><a href="#inbox_tab" title="">Inbox</a></li> 
       <li><a href="#profile_tab" title="">Update Profile</a></li> 
      </ul> 
     </div> <!-- End of tabheader --> 
     <div class="tabcontent"> 
      <div id="addprop_tab"> 
       <p><a href="#" title="Click to add property">Add your property to NPLH</a></p> 
       show added property 
      </div> <!-- End of addprop_tab --> 
      <div id="savedprop_tab"> 
       <p>Browse your saved properties</p> 
      </div> <!-- End of savedprop_tab --> 
      <div id="inbox_tab"> 
       <p>inbox</p> 
      </div> <!-- End of inbox_tab --> 
      <div id="profile_tab"> 
       <ul> 
        <a href="#tab1" title="">Tab1</a> 
        <a href="#tab2" title="">Tab2</a> 
        <a href="#tab3" title="">Tab3</a> 
       </ul> 
      </div> <!-- End of profile_tab --> 
     </div> <!-- End of tabcontent --> 
     <div class="subtab_content"> 
      <div id="tab1"> 
       <p>tab1</p> 
      </div> <!-- End of tab1 -->  
      <div id="tab2"> 
       <p>tab2</p> 
      </div> <!-- End of tab2 --> 
      <div id="tab3"> 
       <p>tab3</p> 
      </div> <!-- End of tab3 --> 
     </div> 

et le code CSS est

.tabheader { 
    width: 1000px; 
    position: relative; 
    top: -100px; 
} 

.tabheader ul { 
    list-style-type: none; 
} 

.tabheader ul li { 
    float: left; 
    width: 175px; 
    font-size: 15px; 
    text-align: center; 
    padding: 10px 25px 10px 25px; 
    margin: 0px 11px 5px 11px; 
    border: 1px solid #aaa; 
} 

.tabcontent { 
    clear: both; 
    position: relative; 
    top: -100px; 
    height: 40px; 
    overflow: hidden; 
    background: #eee; 
} 

.tabcontent div { 
    height: 40px; 
    padding: 10px; 
} 

.subtab_content { 
    clear: both; 
    position: relative; 
    top: -100px; 
    height: 200px; 
    overflow: hidden; 
    background: #eee; 
} 



.subtab_content div { 
    height: 200px; 
    padding: 10px; 
} 

Answer 1

Ok oublier la réponse précédente. Les onglets jQuery ou une solution similaire est la solution. J'étais vraiment nouveau au développement web quand j'ai posé la question

Answer 2

Je réponds à ma propre question ici ... c'est quelques heures de travail, mais je ne sais pas vraiment d'autres variables javascript. Est-ce la meilleure façon de le faire.

Vos commentaires seront grandement appréciés.

JS

<script type="text/javascript"> 
    function activateTab(mainid, li_id, divid, tabid) { 
     var mainDiv = document.getElementById(mainid); 
     var li = document.getElementById(li_id); 
     var tabDiv = document.getElementById(divid); 
     var mainTab = document.getElementById(tabid); 

     for (var i = 0; i < mainDiv.childNodes.length; i++) { 
      var node = mainDiv.childNodes[i]; 
      if (node.nodeType == 1) { 
       node.style.background = (node == li) ? '#aaa' : 'white'; 
      } 
     } 
     for (var i = 0; i < tabDiv.childNodes.length; i++) { 
      var node = tabDiv.childNodes[i]; 
      if (node.nodeType == 1) { 
       node.style.display = (node == mainTab) ? 'block' : 'none'; 
      } 
     } 
    } 

HTML

<div id="tabheader"> 
     <ul id="tablist"> 
      <li id="addprop" style="background: #aaa"><a href="javascript:activateTab('tablist','addprop','tabcontent','addprop_tab')" title="">Add Property</a></li> 
      <li id="savedprop"><a href="javascript:activateTab('tablist','savedprop','tabcontent','savedprop_tab')" title="">Saved Property</a></li> 
      <li id="inbox"><a href="javascript:activateTab('tablist','inbox','tabcontent','inbox_tab')" title="">Inbox</a></li> 
      <li id="profile"><a href="javascript:activateTab('tablist','profile','tabcontent','profile_tab')" title="">Update Profile</a></li> 
     </ul> 
    </div> <!-- End of tabheader --> 
    <div id="tabcontent" class="maintab"> 
     <div id="addprop_tab" style="display: block"> 
      <p><a href="#" title="Click to add property">Add your property to NPLH</a></p> 
     </div> <!-- End of addprop_tab --> 
     <div id="savedprop_tab" style="display: none"> 
      <p>Browse your saved properties</p> 
     </div> <!-- End of savedprop_tab --> 
     <div id="inbox_tab" style="display: none"> 
      <p>inbox</p> 
     </div> <!-- End of inbox_tab --> 
     <div id="profile_tab" style="display: none"> 
      <p> 
       <ul> 
        <a href="javascript:activateTab('tablist','profile','profile_subtab','tab1')" title="">Tab1</a> 
        <a href="javascript:activateTab('tablist','profile','profile_subtab','tab2')" title="">Tab2</a> 
        <a href="javascript:activateTab('tablist','profile','profile_subtab','tab3')" title="">Tab3</a> 
       </ul> 
      </p> 
      <div id="profile_subtab" class="subtab"> 
       <div id="tab1" style="display: block"> 
        <p>tab1</p> 
       </div> <!-- End of tab1 --> 
       <div id="tab2" style="display: none"> 
        <p>tab2</p> 
       </div> <!-- End of tab2 --> 
       <div id="tab3" style="display: none"> 
        <p>tab3</p> 
       </div> <!-- End of tab3 --> 
      </div> 
     </div> <!-- End of profile_tab --> 
    </div> <!-- End of tabcontent -->