不是第一次或最后一次 [英] jquery .not first or last
问题描述
$（'a'）。not（'：first'）。not（'：last'）。css（'z-index'，'90'）;
我遇到了问题。任何建议？
不确定是否完全符合您的要求， ..
我已经清理了一些代码，删除了我认为与问题无关的部分，主要是jQuery cookie代码。我还优化了一些其他部分，如上一个/下一个标签选项和散列处理
标签z-index 魔法最终缩减为非常相当简单的函数：
var i = 0;
$（'。tab'）。css（'z-index'，function（index）{
return index< selectedTabIndex？1：（index> selectedTabIndex？--i：0）;
}）;
这利用了一个事实，DOM有一个自然的z-索引 - 页面共享相同的z-index将遮蔽以前的元素。
因此，给定3个选项卡，并且要显示第三个选项卡，z-对于所有元素都是相等的，并且元素的自然z-index将意味着第三个选项卡将在顶部。
这可能最好显示在矩阵：
tab＃1 tab＃2 tab＃3（z-index）
tab＃1 1 0 -1
tab＃2 1 1 0
tab＃3 1 1 1
（已选择）
希望会显示，如果你想显示Tab＃3，那么你可以设置 z-index：1 所有。类似地，如果你想显示tab＃2，那么除了最后一个标签之外的所有标签可以有 z-index：1 。实际上，一般规则是在您要显示的所有标签之前设置 z-index：1 - 这是第一部分三元运算符（ index< selectedTabIndex？1 ）。复杂化带有第一个选项卡，因为你想反转自然z索引和移动后一个选项卡下一个之前。基本上代码（index> selectedTabIndex？--i：0）减少每个连续选项卡的z-index，实际上可用于3个选项卡： / p>
因此，当您要显示第一个标签时，5个标签的预期 z-index 结果应该 1 0 -1 -2 -3 。这些都包含在jQuery中 css（） 变体，它采用函数回调以简洁的方式更改 z-index 。
但我也制作了 演示小提示 （3个标签）和 演示小提示 （4个标签）
HTML
< div class =tabs>
< ul class =tabmenu>
< li>< a href =＃tab1>标签1< / a>< / li>
< li>< a href =＃tab2>标签2< / a>< / li>
< li>< a href =＃tab3>标签3< / a>< / li>
< / ul>
< div class =wrapper-tabs>
< div id =tab1class =tab>
< h1>标签1< / h1>
< p> Lorem ipsum< / p>
< / div>
< div id =tab2class =tab>
< h1>标签2< / h1>
< p> Lorem ipsum< / p>
< / div>
< div id =tab3class =tab>
< h1>标签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。 hashSubstring（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）;
}）;
//将所选标签添加到散列
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&＃187;< / a>）;
}
if（i！= 0）{
$（this）.append（< a href ='＃'class ='prev-tab mover'>&＃171; 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'）;
}）;
//用于页面加载检查哈希else show：first
var tab = window.location.hash.length> ; 0？window.location.hash：'＃tab1';
$（'ul.tabmenu a [href ='+ tab +']'）。addClass（'active'）。trigger '）;
}）;
$('a').not(':first').not(':last').css('z-index', '90');
do this.
I'm having problem with this. any suggestion?
Not sure if it's exactly what you are after, but here we go...
I've cleaned up the code a fair bit and removed the parts that I thought were not relevant to the question, mainlyis the jQuery cookie code. I also optimized some other parts like the previous/next tab selection and the hash manipulation
The tab z-index magic was in the end reduced to a very fairly simple function:
var i = 0;
$('.tab').css('z-index', function(index) {
return index < selectedTabIndex ? 1 : (index > selectedTabIndex ? --i : 0);
});
This exploits the fact that the DOM has a natural z-index - elements further down the page that share the same z-index will obscure previous elements.
So given 3 tabs and you want to show the 3rd tab, the z-index can be equal for all elements and the natural z-index of the elements will mean that the 3rd tab will be on top.
It's probably best shown in a (badly drawn) matrix:
tab#1 tab#2 tab#3 (z-index)
tab#1 1 0 -1
tab#2 1 1 0
tab#3 1 1 1
(selected)
which I was hoping would show that if you want to show tab#3 then you can set z-index:1 for all. Similarly if you want to show tab#2 then all tabs apart from the last can have z-index:1. In fact the general rule is set z-index:1 for all tabs prior to the one you want to show - this is the first part of the ternary operator (index < selectedTabIndex ? 1). The complication comes with the first tab since you want to reverse the natural z-index and move a subsequent tab under a previous one. Essentially the code (index > selectedTabIndex ? --i : 0) decrements the z-index for each successive tab and will actually work for more than 3 tabs :-)
So the expected z-index result for 5 tabs when you want to show the first tab should be 1 0 -1 -2 -3. This is all wrapped in the jQuery css() variant that takes a function callback to change the z-index in a succinct manner.
The full code is included but I also made a demo fiddle (3 tabs) and demo fiddle (4 tabs)
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');
});
这篇关于不是第一次或最后一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
