Как включить вкладки внутри вкладки в JQuery ...?

Вот мой код, я бы хотел, чтобы в основном были вкладки с верхними родителями, но как только вы нажмете на вкладку, на вкладках с кликами будут отображаться суб-вкладки, чтобы вы могли просматривать разные содержания различных вкладок на родительской вкладке. Когда я нажимаю на разные родительские вкладки, они показывают, но когда я нажимаю на субтабли, меню субтитров исчезает, и я ничего не вижу. Может ли кто-нибудь сказать мне, где я ошибся?Как включить вкладки внутри вкладки в JQuery ...?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<head> 

<script type="text/javascript"> 

    jQuery(document).ready(function() { 

    $('#tabs > div').hide(); 
     $('#tabs div:first').fadeIn('slow'); 
     $('#tabs ul li:first').addClass('active'); 
     $('#tabs ul li a').click(function(){ 
       $('#tabs ul li.active').removeClass('active'); // <== Only what you need 
       $(this).parent().addClass('active'); 
       var selectedTab=$(this).attr('href'); 
       $('#tabs > div').fadeOut('slow', function() {  // <== Use a callback 
        $(selectedTab).delay(10).fadeIn('fast');   // <== add a delay 
       });   
       return false; 
      }); 

     // Video Feeds subcategories 
     $('#tabs-video-feeds > div').hide(); 
     $('#tabs-video-feeds div:first').fadeIn('slow'); 
     $('#tabs-video-feeds ul li:first').addClass('active'); 
     $('#tabs-video-feeds ul li a').click(function(){ 
       $('#tabs-video-feeds ul li.active').removeClass('active'); // <== Only what you need 
       $(this).parent().addClass('active'); 
       var selectedTab=$(this).attr('href'); 
       $('#tabs-video-feeds > div').fadeOut('slow', function() {  // <== Use a callback 
        $(selectedTab).delay(10).fadeIn('fast');   // <== add a delay 
       });   
       return false; 
      }); 

    }); 

</script> 
</head> 

<body> 

    <div id="tabs"> 
     <ul> 
     <li><a href="#tabs-1">Public Figures</a></li> 
     <li><a href="#tabs-2"> My Feeds </a></li> 
     <li><a href="#tabs-3">Videos</a></li> 
     <li><a href="#tabs-4"> Music </a></li> 
     <li><a href="#tabs-5">Pictures</a></li> 
     <li><a href="#tabs-6"> Infographics </a></li> 
     </ul> 

     <!-- Start of First tab --> 

     <div id="tabs-1"> 

     First Parent tab 

    </div> 

    <!-- Start of Second tab --> 
    <div id="tabs-2"> 

     Second parent tab content 

    </div> <!-- end of second tab --> 

    <div id="tabs-3"> 

    Third parent tab .. Below are 3 subtabs .. the subtabs menu and the content .. 

    <div id="tabs-video-feeds"> 
     <ul> 
     <li><a href="#tabs-10"> Comedy</a></li> 
     <li><a href="#tabs-11"> Music </a></li> 
     <li><a href="#tabs-12"> Politics </a></li> 
     </ul> 
     <div id="tabs-10"> Comedy ..</div> 
     <div id="tabs-11"> Music ..</div> 
     <div id="tabs-12"> Comedy..</div> 
    </div> 
    </div> -- end of third parent tab 

    <div id="tabs-4"> 4 parent tab content </div> 
    <div id="tabs-5"> 5 parent tab content</div> 
    <div id="tabs-6"> 6 parent tab content </div> 

    </div> <!-- End div of tabs --> 
</body> 
</html>

источник

2013-11-12 Stack One

'$ ('# tabs ul li.active'). RemoveClass ('active')' больше, чем вы хотите –

Проблема находится на линии

$('#tabs ul li a').click(function(){

которая ориентирована как родительские и дочерние вкладки, а не только родительских из них. Когда нажимается на дочернюю вкладку, fadeOut выполняется для всех элементов #tabs > div, эффективно скрывая все родительские вкладки со всем их содержимым.

К счастью, исправить, кажется, довольно легко:

$('#tabs > ul li a').click(function(){

Здесь работает fiddle.

источник

2013-11-12 19:51:34 Andrei

YOU ROCK MY WORLD, THANK YOU !!! –

Как включить вкладки внутри вкладки в JQuery ...?

ответ

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