Mit dem Material Design Light / Material Design Paket ist es nicht möglich verschachtelte Tabs/Karteireiter zu erstellen. Es wird darauf hingewiesen, dass es aus UI Sicht ungünstig ist, die Tabs zu verschachteln. Wenn es aber nicht anders geht, kann folgender Code verwendet werden:

HTML/Markup:

<div class="mdl-tabs mdl-js-tabs ds-tabs">       
    <div class="mdl-tabs__tab-bar mdl-tabs__tab-bar-top">
        <a href="#tab1-panel" class="mdl-tabs__tab is-active">Tab 1</a>
        <a href="#tab2-panel" class="mdl-tabs__tab">Tab 2</a>
    </div>                
    <div class="mdl-tabs__panel is-active" id="tab1-panel">
                  
        <div class="mdl-tabs ds-tabs">       
            <div class="mdl-tabs__tab-bar">
                <a href="#tab-1-1-panel" class="mdl-tabs__tab is-active">Tab 1.1</a>                      
                <a href="#tab-1-2-panel" class="mdl-tabs__tab">Tab 1.2</a>
            </div>                
            <div class="mdl-tabs__panel is-active" id="tab-1-1-panel">
                    
                1.1
                    
            </div>
            <div class="mdl-tabs__panel" id="tab-1-2-panel">
                    
                1.2
                    
            </div>
        </div>
        
    </div>
            
    <div class="mdl-tabs__panel" id="tab2-panel">
         
        <div class="mdl-tabs ds-tabs">       
            <div class="mdl-tabs__tab-bar">
                <a href="#tab-2-1-panel" class="mdl-tabs__tab is-active">Tab 2.1</a>                      
                <a href="#tab-2-2-panel" class="mdl-tabs__tab">Tab 2.2</a>
            </div>                
            <div class="mdl-tabs__panel is-active" id="tab-2-1-panel">
                    
                2.1
                    
            </div>
            <div class="mdl-tabs__panel" id="tab-2-2-panel">
                    
                2.2
                    
            </div>
        </div>
        
    </div>                
</div>

JavaScript:

<script type="text/javascript">/* <![CDATA[ */

    jQuery(document).ready(function() {
    
        jQuery('.ds-tabs .mdl-tabs__tab').unbind('click').off('click').on('click', function(event) {
      
            event.stopImmediatePropagation(); 
            
            if (jQuery(this).hasClass('is-active'))
            {
                
                return false;
                
            }
            else 
            {
                
                jQuery(this).parent().children('.is-active').removeClass('is-active');
                jQuery(this).addClass('is-active');
                
                jQuery(this).parent().parent().children('.mdl-tabs__panel.is-active').removeClass('is-active');
                jQuery(this).parent().parent().children('.mdl-tabs__panel' + jQuery(this).attr("href")).addClass('is-active');
                    
            }
            
            return false;
        
        } );
        
    } );

/* ]]> */</script>

Wichtig ist die Klasse „ds-tabs“ auf dem umschließenden Element.