Tabbed Inhalt mit Dropdown-Menü mit Jquery

Question

Ich versuche, eine Seite mit Tabbed Content zu kisten. Einige Registerkarten haben Dropdown-Menüs. Ich erschaffe das mit li ohne href. Das Hervorheben der li-Elemente, wenn ich auf ihnen schwebe, geschieht nur in der ersten Instanz nach dem Laden der Seite. Danach verhält sich die Seite anders - die Hervorhebung wird nicht beim Schweben gerendert. Kann irgendein Körper irgendein Heilmittel vorschlagen?

die Codes sind wie folgt: HTML:

<ul class="tabs"> 
    <li data-content="first" class="tab-link">First Tab</li> 
    <li class="submenu-container"> First Dropdown 
     <ul class="dropdown"> 
      <li data-content="second" class="tab-link">Second Tab</li> 
      <li data-content="third" class="tab-link">Third Tab</li> 
     </ul> 
    </li> 
    <li class="submenu-container"> Second Dropdown 
     <ul class="dropdown"> 
      <li data-content="fourth" class="tab-link">Fourth Tab</li> 
      <li data-content="fifth" class="tab-link">Fifth Tab</li> 
      <li data-content="sixth" class="tab-link">Sixth Tab</li> 
     </ul> 
    </li> 
    <li data-content="seventh" class="tab-link">Seventh Tab</li> 
</ul> 

<br> 
<br> 
<br> 
<br> 

<div class="selected" id="first">Contents of First Tab</div> 
<div class="hidden" id="second">Contents of Second Tab</div> 
<div class="hidden" id="third">Contents of Third Tab</div> 
<div class="hidden" id="fourth">Contents of Fourth Tab</div> 
<div class="hidden" id="fifth">Contents of Fifth Tab</div> 
<div class="hidden" id="sixth">Contents of Sixth Tab</div> 
<div class="hidden" id="seventh">Contents of Seventh Tab</div> 

<script type="text/javascript"> 

    //$('li[data-content="first"').css({'background-color':'lightgrey'}); //This line keeps the first tab highlighted when the page is being loded 

    $(document).ready(function() { 

    $('li[data-content="first"').css({'background-color':'lightgrey','margin-bottom' : '-2px'}); //This line keeps the first tab highlighted when the page is being loded 



    $('li').on('click', function(e) { 

     //////first few lines control the change of color of the selected tab/////// 

     //removing the previous selected menu state 
     $('li').css({'background-color':'#b2b2ff'}); 

     //is this element from the second level menu? 
     if($(this).closest('ul').hasClass('dropdown')){ 
      $(this).parents('li').css({'background-color':'lightgrey' ,'margin-bottom' : '-2px'}); 


     //this is a parent element 
     }else{ 
      $(this).css({'background-color':'lightgrey' ,'margin-bottom' : '-2px'}); 
     } 

     /////////////code for controlling change of color of selected tab ends here /////// 
     /////////////////////////////////////////////////////////////////////////////////// 

     if ($(this).hasClass('submenu-container')) { //prevents any action when any of the top level menus having submenus is clicked 
      e.preventDefault(); 
      return false; 
     } 

     if ($(this).parents().find('li').hasClass('submenu-container')){ //selects appropriate div element having content 
                     //relevant to the menu selected  

      var data_content = $(this).attr('data-content'); 

       $('div').each(function(){ 
         if($(this).attr('id') == data_content) { 
          $(this).addClass('selected'); 
          } 
         else 
          { 
          $(this).removeClass('selected'); 
          $(this).addClass('hidden'); 
         } 

        }); 

       e.preventDefault(); 
       return false; 
      } 

    }); //End $('li').on('click') 

}); //End $(document).ready() 

und die CSS ist:

.tabs { 
list-style-type: none; 
margin-bottom: 0; 
} 

.tabs > li { 
float: left; 
margin: 1px; 
height: 40px; 
text-align: center; 
line-height: 250%; 
padding: 7px; 
background-color: #b2b2ff; 
} 

.tabs > li:hover { 
background-color:#e5e5ff; 
} 

.dropdown { 
display: none; 
} 

.tabs >li:hover > ul.dropdown { 
list-style-type: none; 
top: 7px; 
left: -47px;  
position: relative; 
display: block; 
} 

.tabs >li:hover > ul > li { 
background-color: #b2b2ff; 
z-index: 100; 
padding: 7px; 
} 

ul.dropdown > li:hover { 
background-color:#e5e5ff; 
} 


div { 
padding: 100px; 
} 

.hidden { 

clear: both; 
display: none; 

} 

.selected { 
clear: both; 
display: block; 
margin-top: -20px; 
padding-left: 50px; 
z-index: 0; 
background-color: lightgrey; 
height: 500px; 
} 

Vielen Dank allen.

Answer 1

quick and dirty fix wäre einzustellen:

.tabs > li:hover { 
    background-color:#e5e5ff!important; 
} 

Da auf klicken Sie setzen Inline-background-color css mit jQuery.

Sie können es testen hier https://jsfiddle.net/L3ead1u8/

aktualisieren

Auch eine weitere Lösung mit jQuery wie diese

//removing the previous selected menu state 
$('li').css({'background-color':''}); 
$(this).css({'background-color':'#b2b2ff'}); 

Test hier https://jsfiddle.net/L3ead1u8/1/