Не уверен, что это точно , что вы ищете, но здесь мы идем ...
Я немного исправил код и удалил части, которые я думал, былине имеет отношения к вопросу, в основном это код cookie jQuery.Я также оптимизировал некоторые другие части, такие как выбор предыдущей / следующей вкладки и манипулирование хешем
Магия z-index в конце была уменьшена до очень довольно простая функция:
var i = 0;
$('.tab').css('z-index', function(index) {
return index < selectedTabIndex ? 1 : (index > selectedTabIndex ? --i : 0);
});
Это использует тот факт, что DOM имеет естественный z-индекс - элементы вниз по странице , которые имеют тот же z-индексбудет скрывать предыдущие элементы.
Таким образом, при наличии 3 вкладок и необходимости отображения 3-й вкладки z-индекс может быть одинаковым для всех элементов, а естественный z-индекс элементов будет означать, что 3-я вкладка будетбыть на вершине.
Это, вероятно, лучше всего показать в (плохо нарисованной) матрице:
tab#1 tab#2 tab#3 (z-index)
tab#1 1 0 -1
tab#2 1 1 0
tab#3 1 1 1
(selected)
, которая, как я надеялся, покажет, что если вы хотите показать вкладку № 3, вы можете установитьz-index:1 для всех.Точно так же, если вы хотите показать вкладку № 2, тогда все вкладки, кроме последней, могут иметь z-index:1.Фактически, общее правило: установить z-index:1 для всех вкладок, предшествующих той, которую вы хотите показать - это первая часть троичного оператора (index < selectedTabIndex ? 1).Сложность связана с первой вкладкой, так как вы хотите обратить вспять естественный z-индекс и переместить следующую вкладку под предыдущую.По сути, код (index > selectedTabIndex ? --i : 0) уменьшает z-индекс для каждой последующей вкладки и фактически будет работать для более чем 3 вкладок: -)
Таким образом, ожидаемый z-index результат для 5 вкладок, когда вы хотите показать первуювкладка должна быть 1 0 -1 -2 -3.Все это обернуто в варианте jQuery css(), который принимает функцию обратного вызова для краткого изменения z-index.
Полный код включен, но я также сделал демонстрационная скрипка (3 вкладки) и демонстрационная скрипка (4 вкладки)
HTML
<div class="tabs">
<ul class="tabmenu">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="wrapper-tabs">
<div id="tab1" class="tab">
<h1>Tab 1</h1>
<p>Lorem ipsum</p>
</div>
<div id="tab2" class="tab">
<h1>Tab 2</h1>
<p>Lorem ipsum</p>
</div>
<div id="tab3" class="tab">
<h1>Tab 3</h1>
<p>Lorem ipsum</p>
</div>
</div>
</div>
CSS
.tabmenu {
border-bottom: 1px solid #ccc;
height: 25px;
}
.tabmenu li {
float: left;
display: inline;
border: 1px solid #ccc;
border-bottom: none;
margin-right: 5px;
}
.tabmenu li a {
display: block;
padding: 2px 4px;
}
.tabmenu li a.selected {
color:red;
}
.wrapper-tabs{position: relative;float: left;clear:both}
#tab1{position: absolute;z-index:10;left: 0px;top: 0px;background:#ccc;}
#tab2{position: absolute;z-index:20;left: 20px;top: 20px;background:#ff0000;}
#tab3{position: absolute;z-index:30;left: 40px;top: 40px;background:#808080;}
.tabs .tab{clear: both;background:#fff;width:560px;position: relative;top:0px;padding: 20px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:3px 0 5px 0 #BBBBBB;
-moz-box-shadow:3px 0 5px 0 #BBBBBB;
box-shadow:3px 0 5px 0 #BBBBBB;min-height:454px;height:auto!important;height:454px;
}
.tab {background:#fff;
clear: both;
border: 1px solid #ccc;
border-top: none;
padding: 20px;
position: relative;
-moz-border-radius-bottomleft:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;-webkit-border-bottom-right-radius:6px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;
}
a.mover {
background: #D8D8D8;
color: #5F5F5F;
font-size: 11px;
padding: 2px 12px;
position: absolute;
}
.next-tab {
border-bottom-right-radius: 6px;
border-top-left-radius: 10px;
bottom: 0;
right: 0;
}
.prev-tab {
border-bottom-left-radius: 6px;
border-top-right-radius: 10px;
bottom: 0;
left: 0;
}
JavaScript (jQuery)
$(function() {
$('ul.tabmenu a').click(function(e) {
var selectedTabIndex = parseInt(this.hash.substring(4));
$('ul.tabmenu a').removeClass('active');
$(this).addClass('active');
var i = 0;
$('.tab').css('z-index', function(index) {
return index < selectedTabIndex ? 1 : (index > selectedTabIndex ? --i : 0);
});
// add selected tab to hash
window.location.hash = this.hash.replace(/\d$/, selectedTabIndex);
e.preventDefault();
});
var lastTabIndex = $('.tab').length - 1;
$('.tab').each(function(i) {
if (i != lastTabIndex) {
$(this).append("<a href='#' class='next-tab mover'>Next Tab »</a>");
}
if (i != 0) {
$(this).append("<a href='#' class='prev-tab mover'>« Prev Tab</a>");
}
});
var tabMenu = $('.tabmenu li');
$('.next-tab, .prev-tab').click(function() {
var newTabIndex = $(this).hasClass('next-tab') ? 1 : -1;
tabMenu.find('a[href="#tab' + (parseInt($(this).closest('div').attr('id').substring(3)) + newTabIndex) + '"]').trigger('click');
});
// for page load check for hash else show :first
var tab = window.location.hash.length > 0 ? window.location.hash : '#tab1';
$('ul.tabmenu a[href="' + tab + '"]').addClass('active').trigger('click');
});