So kann mann insgesamt 42 Tabs verschiedene Inhalte erstellen und das auf einer Seite
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>