Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
sieben mal sechs tabs

sieben mal sechs tabs

So kann mann insgesamt 42 Tabs verschiedene Inhalte erstellen und das auf einer Seite

Der hier verwendete 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="/js_webseite/jquery.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>