Lösungen ,

sieben_mal_sechs_tabs.php

Quell Code

 <!DOCTYPE HTML>
<html lang="de">
<head>
<title>7 X & Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    margin: 0px;
    padding: 0px;
    background: #f5f5f5;
    font-family: 'Segoe UI';
}

ul.resp-tabs-list, p {
    margin: 0px;
    padding: 0px;
}

.resp-tabs-list li {
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    padding: 13px 15px;
    margin: 0 4px 0 0;
    list-style: none;
    cursor: pointer;
    float: left;
}

.resp-tabs-container {
    padding: 0px;
    background-color: #fff;
    clear: left;
}

h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
}

.resp-tab-content {
    display: none;
    padding: 15px;
}

.resp-tab-active {
    border: 1px solid #5AB1D0 !important;
	border-bottom: none;
	margin-bottom: -1px !important;
	padding: 12px 14px 14px 14px !important;
	border-top: 4px solid #5AB1D0 !important;
	border-bottom: 0px #fff solid !important;
}

.resp-tab-active {
    border-bottom: none;
    background-color: #fff;
}

.resp-content-active, .resp-accordion-active {
    display: block;
}

.resp-tab-content {
    border: 1px solid #c1c1c1;
	border-top-color: #5AB1D0;
}

h2.resp-accordion {
    font-size: 13px;
    border: 1px solid #c1c1c1;
    border-top: 0px solid #c1c1c1;
    margin: 0px;
    padding: 10px 15px;
}

h2.resp-tab-active {
    border-bottom: 0px solid #c1c1c1 !important;
    margin-bottom: 0px !important;
    padding: 10px 15px !important;
}

h2.resp-tab-title:last-child {
    border-bottom: 12px solid #c1c1c1 !important;
    background: blue;
}

/*-----------Vertical tabs-----------*/
.resp-vtabs ul.resp-tabs-list {
    float: left;
    width: 30%;
}

.resp-vtabs .resp-tabs-list li {
    display: block;
    padding: 15px 15px !important;
    margin: 0 0 4px;
    cursor: pointer;
    float: none;
}

.resp-vtabs .resp-tabs-container {
    padding: 0px;
    background-color: #fff;
    border: 1px solid #c1c1c1;
    float: left;
    width: 68%;
    min-height: 450px;
    border-radius: 4px;
    clear: none;
}

.resp-vtabs .resp-tab-content {
    border: none;
    word-wrap: break-word;
}

.resp-vtabs li.resp-tab-active { 
position: relative;
z-index: 1;
margin-right: -1px !important;
padding: 14px 15px 15px 14px !important;
border-top: 1px solid;
border: 1px solid #5AB1D0 !important;
border-left: 4px solid #5AB1D0 !important;
margin-bottom: 4px !important;
border-right: 1px #FFF solid !important;
}

.resp-arrow {
    width: 0;
    height: 0;
    float: right;
    margin-top: 3px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid #c1c1c1;
}

h2.resp-tab-active span.resp-arrow {
    border: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #9B9797;
}


h2.resp-tab-active {
    background: #DBDBDB;/* !important;*/
}


.resp-easy-accordion .resp-tab-content {
    border: 1px solid #c1c1c1;
}

.resp-easy-accordion .resp-tab-content:last-child{
    border-bottom:1px solid #c1c1c1;
}

.resp-jfit {
    width: 100%;
    margin: 0px;
}

.resp-tab-content-active {
    display: block;
}



@media only screen and (max-width: 768px) {
    ul.resp-tabs-list {
        display: none;
    }

    h2.resp-accordion {
        display: block;
    }

    .resp-vtabs .resp-tab-content {
        border: 1px solid #C1C1C1;
    }

    .resp-vtabs .resp-tabs-container {
        border: none;
        float: none;
        width: 100%;
        min-height: 100px;
        clear: none;
    }

    .resp-accordion-closed {
        display: none !important;
    }

    .resp-vtabs .resp-tab-content:last-child {
        border-bottom: 1px solid #c1c1c1 !important;
    }
}

</style>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
 </head>
<body>
     <h2>Horizontal Tab with (Nested Tabs) </h2>
        <br/>
 
 <div id="parentHorizontalTab">
 <ul class="resp-tabs-list hor_1">
                <li>Horizontal 1</li>
                <li>Horizontal 2</li>
                <li>Horizontal 3</li>
              <li>Horizontal 4</li>
                <li>Horizontal 5</li>
                <li>Horizontal 6</li>          
  </ul>
   
   
   

  <div class="resp-tabs-container hor_1">
<div>
 <div id="ChildVerticalTab_1">
<ul class="resp-tabs-list ver_1">
  <li>vertical 1 horizon 1</li>
 <li>vertical 2 horizon 1</li>
  <li>vertical 3 horizon 1</li>        
  <li>vertical 4 horizon 1</li>       
  <li>vertical 5 horizon 1</li>
  <li>vertical 6 horizon 1</li>       
  <li>vertical 7 horizon 1</li>        
</ul>
<div class="resp-tabs-container ver_1">
<div><p>vertical 1 horizon 1 inhalt</p></div>
 <div><p>vertical 2 horizon 1 inhalt </p></div>  
 <div><p>vertical 3 horizon 1  inhalt</p></div>   
 <div><p>vertical 4 horizon 1 inhalt </p></div>   
 <div><p>vertical 5 horizon 1  inhalt</p></div>   
 <div><p>vertical 6 horizon 1  inhalt</p></div>   
 <div><p>vertical 7 horizon 1  inhalt</p></div>  
</div>
</div>
</div>
</div>
   
   
   
   
    <div class="resp-tabs-container hor_1">
<div>
 <div id="ChildVerticalTab_2">
<ul class="resp-tabs-list ver_2">
  <li>vertical 1 horizon 2 </li>
 <li>vertical 2 horizon 2</li>
  <li>vertical 3 horizon 2</li>           
  <li>vertical 4 horizon 2</li>         
  <li>vertical 5 horizon 2</li>
  <li>vertical 6 horizon 2</li>          
  <li>vertical 7 horizon 2</li>        
</ul>
<div class="resp-tabs-container ver_2">
<div><p>vertical 1 horizon 2 inhalt</p></div>
 <div><p>vertical 2 horizon 2 inhalt</p></div>  
 <div><p>vertical 3 horizon 2 inhalt</p></div>  
 <div><p>vertical 4 horizon 2 inhalt</p></div>  
 <div><p>vertical 5 horizon 2 inhalt</p></div>  
 <div><p>vertical 6 horizon 2 inhalt</p></div>  
 <div><p>vertical 7 horizon 2 inhalt</p></div>  
</div>
</div>
</div>
</div>
   
   
   
   
    <div class="resp-tabs-container hor_1">
<div>
 <div id="ChildVerticalTab_3">
<ul class="resp-tabs-list ver_3">
  <li>vertical 1 horizon 3 </li>
 <li>vertical 2 horizon 3 </li>
  <li>vertical 3 horizon 3 </li>        
  <li>vertical 4 horizon 3 </li>        
  <li>vertical 5 horizon 3 </li>
  <li>vertical 6 horizon 3 </li>      
  <li>vertical 7 horizon 3 </li>        
</ul>
<div class="resp-tabs-container ver_3">
<div><p>vertical 1 horizon 3 inhalt</p></div>
 <div><p>vertical 2 horizon 3 inhalt</p></div>  
 <div><p>vertical 3 horizon 3 </p></div>  
 <div><p>vertical 4 horizon 3 inhalt</p></div>  
 <div><p>vertical 5 horizon 3 inhalt</p></div>   
 <div><p>vertical 6 horizon 3 inhalt</p></div>   
 <div><p>vertical 7 horizon 3 inhalt</p></div>  
</div>
</div>
</div>
</div>
   
   
   
   
   
    <div class="resp-tabs-container hor_1">
<div>
 <div id="ChildVerticalTab_4">
<ul class="resp-tabs-list ver_4">
  <li>vertical 1 horizon 4 </li>
 <li>vertical 2 horizon 4 </li>
  <li>vertical 3 horizon 4</li>         
  <li>vertical 4 horizon 4</li>        
  <li>vertical 5 horizon 4</li>
  <li>vertical 6 horizon 4</li>        
  <li>vertical 7 horizon 4</li>        
</ul>
<div class="resp-tabs-container ver_4">
<div><p>vertical 1 horizon 4  inhalt</p></div>
 <div><p>vertical 2 horizon 4 inhalt</p></div>  
 <div><p>vertical 3 horizon 4 inhalt</p></div>  
 <div><p>vertical 4 horizon 4 inhalt</p></div>  
 <div><p>vertical 5 horizon 4 inhalt</p></div>  
 <div><p>vertical 6 horizon 4 inhalt</p></div>  
 <div><p>vertical 7 horizon 4 inhalt</p></div>  
</div>
</div>
</div>
</div>
   
   
   
   
    <div class="resp-tabs-container hor_1">
<div>
 <div id="ChildVerticalTab_5">
<ul class="resp-tabs-list ver_5">
  <li>vertical 1 horizon 5</li>
 <li>vertical 2 horizon 5</li>
  <li>vertical 3 horizon 5</li>       
  <li>vertical 4 horizon 5</li>       
  <li>vertical 5 horizon 5</li>
  <li>vertical 6 horizon 5</li>       
  <li>vertical 7 horizon 5</li>        
</ul>
<div class="resp-tabs-container ver_5">
<div><p>vertical 1 horizon 5 inhalt</p></div>
 <div><p>vertical 2 horizon 5 inhalt</p></div>   
 <div><p>vertical 3 horizon 5 inhalt</p></div>   
 <div><p>vertical 4 horizon 5 inhalt</p></div>   
 <div><p>vertical 5 horizon 5 inhalt</p></div>   
 <div><p>vertical 6 horizon 5 inhalt</p></div>   
 <div><p>vertical 7 horizon 5 inhalt</p></div>  
</div>
</div>
</div>
</div>
   
   
   
   
    <div class="resp-tabs-container hor_1">
<div>
 <div id="ChildVerticalTab_6">
<ul class="resp-tabs-list ver_6">
  <li>vertical 1 horizon 6</li>
 <li>vertical 2 horizon 6</li>
  <li>vertical 3 horizon 6</li>         
  <li>vertical 4 horizon 6</li>         
  <li>vertical 5 horizon 6</li>
  <li>vertical 6 horizon 6</li>        
  <li>vertical 7 horizon 6</li>        
</ul>
<div class="resp-tabs-container ver_6">
<div><p>vertical 1 horizon 6 inhalt</p></div>
 <div><p>vertical 2 horizon 6 inhalt</p></div>   
 <div><p>vertical 3 horizon 6 inhalt</p></div>  
 <div><p>vertical 4 horizon 6 inhalt</p></div>   
 <div><p>vertical 5 horizon 6 inhalt</p></div>   
 <div><p>vertical 6 horizon 6 inhalt</p></div>   
 <div><p>vertical 7 horizon 6 inhalt</p></div>  
</div>
</div>
</div>
</div>
 
</div>
<script>
// Script 1
(function ($) {
    $.fn.extend({
        easyResponsiveTabs: function (options) {
            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                type: 'default', //default, vertical, accordion;
                width: 'auto',
                fit: true,
                closed: false,
                tabidentify: '',
                activetab_bg: 'white',
                inactive_bg: '#F5F5F5',
                active_border_color: '#c1c1c1',
                active_content_border_color: '#c1c1c1',
                activate: function () {
                }
            }
            //Variables
            var options = $.extend(defaults, options);
            var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
            var hash = window.location.hash;
            var historyApi = !!(window.history && history.replaceState);

            //Events
            $(this).bind('tabactivate', function (e, currentTab) {
                if (typeof options.activate === 'function') {
                    options.activate.call(currentTab, e)
                }
            });

            //Main function
            this.each(function () {
                var $respTabs = $(this);
                var $respTabsList = $respTabs.find('ul.resp-tabs-list.' + options.tabidentify);
                var respTabsId = $respTabs.attr('id');
                $respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li').addClass('resp-tab-item').addClass(options.tabidentify);
                $respTabs.css({
                    'display': 'block',
                    'width': jwidth
                });

                if (options.type == 'vertical')
                    $respTabsList.css('margin-top', '3px');

                $respTabs.find('.resp-tabs-container.' + options.tabidentify).css('border-color', options.active_content_border_color);
                $respTabs.find('.resp-tabs-container.' + options.tabidentify + ' > div').addClass('resp-tab-content').addClass(options.tabidentify);
                jtab_options();
                //Properties Function
                function jtab_options() {
                    if (jtype == vtabs) {
                        $respTabs.addClass('resp-vtabs').addClass(options.tabidentify);
                    }
                    if (jfit == true) {
                        $respTabs.css({ width: '100%', margin: '0px' });
                    }
                    if (jtype == accord) {
                        $respTabs.addClass('resp-easy-accordion').addClass(options.tabidentify);
                        $respTabs.find('.resp-tabs-list').css('display', 'none');
                    }
                }

                //Assigning the h2 markup to accordion title
                var $tabItemh2;
                $respTabs.find('.resp-tab-content.' + options.tabidentify).before("<h2 class='resp-accordion " + options.tabidentify + "' role='tab'><span class='resp-arrow'></span></h2>");

                $respTabs.find('.resp-tab-content.' + options.tabidentify).prev("h2").css({
                    'background-color': options.inactive_bg,
                    'border-color': options.active_border_color
                });

                var itemCount = 0;
                $respTabs.find('.resp-accordion').each(function () {
                    $tabItemh2 = $(this);
                    var $tabItem = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')');
                    var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')');
                    $accItem.append($tabItem.html());
                    $accItem.data($tabItem.data());
                    $tabItemh2.attr('aria-controls', options.tabidentify + '_tab_item-' + (itemCount));
                    itemCount++;
                });

                //Assigning the 'aria-controls' to Tab items
                var count = 0,
                    $tabContent;
                $respTabs.find('.resp-tab-item').each(function () {
                    $tabItem = $(this);
                    $tabItem.attr('aria-controls', options.tabidentify + '_tab_item-' + (count));
                    $tabItem.attr('role', 'tab');
                    $tabItem.css({
                        'background-color': options.inactive_bg,
                        'border-color': 'none'
                    });

                    //Assigning the 'aria-labelledby' attr to tab-content
                    var tabcount = 0;
                    $respTabs.find('.resp-tab-content.' + options.tabidentify).each(function () {
                        $tabContent = $(this);
                        $tabContent.attr('aria-labelledby', options.tabidentify + '_tab_item-' + (tabcount)).css({
                            'border-color': options.active_border_color
                        });
                        tabcount++;
                    });
                    count++;
                });

                // Show correct content area
                var tabNum = 0;
                if (hash != '') {
                    var matches = hash.match(new RegExp(respTabsId + "([0-9]+)"));
                    if (matches !== null && matches.length === 2) {
                        tabNum = parseInt(matches[1], 10) - 1;
                        if (tabNum > count) {
                            tabNum = 0;
                        }
                    }
                }

                //Active correct tab
                $($respTabs.find('.resp-tab-item.' + options.tabidentify)[tabNum]).addClass('resp-tab-active').css({
                    'background-color': options.activetab_bg,
                    'border-color': options.active_border_color
                });


                if (options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {
                    $($respTabs.find('.resp-accordion.' + options.tabidentify)[tabNum]).addClass('resp-tab-active').css({
                        'background-color': options.activetab_bg + ' !important',
                        'border-color': options.active_border_color,
                        'background': 'none'
                    });

                    $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-tab-content-active').addClass(options.tabidentify).attr('style', 'display:block');
                }
                //assign proper classes for when tabs mode is activated before making a selection in accordion mode
                else {

                }

                //Tab Click action function
                $respTabs.find("[role=tab]").each(function () {

                    var $currentTab = $(this);
                    $currentTab.click(function () {

                        var $currentTab = $(this);
                        var $tabAria = $currentTab.attr('aria-controls');

                        if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
                            $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp('', function () {
                                $(this).addClass('resp-accordion-closed');
                            });
                            $currentTab.removeClass('resp-tab-active').css({
                                'background-color': options.inactive_bg,
                                'border-color': 'none'
                            });
                            return false;
                        }
                        if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
                            $respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active').css({
                                'background-color': options.inactive_bg,
                                'border-color': 'none'
                            });
                            $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active').css({
                                'background-color': options.activetab_bg,
                                'border-color': options.active_border_color
                            });

                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify).slideDown().addClass('resp-tab-content-active');
                        } else {
                            console.log('here');
                            $respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active').css({
                                'background-color': options.inactive_bg,
                                'border-color': 'none'
                            });

                            $respTabs.find('.resp-tab-content-active.' + options.tabidentify).removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');

                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active').css({
                                'background-color': options.activetab_bg,
                                'border-color': options.active_border_color
                            });

                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify).addClass('resp-tab-content-active').attr('style', 'display:block');
                        }
                        //Trigger tab activation event
                        $currentTab.trigger('tabactivate', $currentTab);

                        //Update Browser History
                        if (historyApi) {
                            var currentHash = window.location.hash;
                            var tabAriaParts = $tabAria.split('tab_item-');
                            // var newHash = respTabsId + (parseInt($tabAria.substring(9), 10) + 1).toString();
                            var newHash = respTabsId + (parseInt(tabAriaParts[1], 10) + 1).toString();
                            if (currentHash != "") {
                                var re = new RegExp(respTabsId + "[0-9]+");
                                if (currentHash.match(re) != null) {
                                    newHash = currentHash.replace(re, newHash);
                                }
                                else {
                                    newHash = currentHash + "|" + newHash;
                                }
                            }
                            else {
                                newHash = '#' + newHash;
                            }

                            history.replaceState(null, null, newHash);
                        }
                    });

                });

                //Window resize function                   
                $(window).resize(function () {
                    $respTabs.find('.resp-accordion-closed').removeAttr('style');
                });
            });
        }
    });
})(jQuery);
 
        $(document).ready(function() {
        //Horizontal Tab
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'horizontal', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
 
    for(a=1;a<=6;a++){
        $('#ChildVerticalTab_'+a).easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
            tabidentify: 'ver_'+a, 
            activetab_bg: '#fff', 
            inactive_bg: '#F5F5F5', 
            active_border_color: '#c1c1c1', 
            active_content_border_color: '#5AB1D0'
        });
  }
 
    });
 
</script>
 </body>
 </html>