$('a').not(':first').not(':last').css('z-index', '90');
这样做。
我遇到了这个问题。有什么建议吗?
答案 0 :(得分:4)
不确定它是完全你所追求的是什么,但我们走了......
我已经清理了相当多的代码并删除了我认为与问题无关的部分,主要是jQuery cookie代码。我还优化了其他一些部分,例如上一个/下一个标签选择和hash操作
标签z-index 魔法最终减少为非常相当简单的功能:
var i = 0;
$('.tab').css('z-index', function(index) {
return index < selectedTabIndex ? 1 : (index > selectedTabIndex ? --i : 0);
});
这利用了DOM具有自然z-index的事实 - 位于页面之下的元素共享相同的z-index将模糊以前的元素。
因此,给定3个选项卡并且您想要显示第3个选项卡,所有元素的z-index可以相等,元素的自然z-index将意味着第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并在后一个选项卡下移动后续选项卡。本质上,代码(index > selectedTabIndex ? --i : 0)
递减每个连续选项卡的z-index,实际上可以使用超过3个选项卡: - )
因此,当您要显示第一个标签时,5个标签的预期z-index
结果应为1 0 -1 -2 -3
。这全部包含在jQuery css()
变体中,它采用函数回调以简洁的方式更改z-index
。
包含完整代码,但我还制作了demo fiddle(3个标签)和demo fiddle(4个标签)
<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>
.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;
}
$(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');
});
答案 1 :(得分:3)
jQuery对我来说似乎很好,也许再调试一下?或尝试类似的事情:
$("a:not(:first):not(:last)").css('z-index', '90');
答案 2 :(得分:2)
尝试:first-child
和:last-child
答案 3 :(得分:2)
试试这个
$('a').not('li:first, li:last').css('z-index', '90');
答案 4 :(得分:1)
所有答案都比他们不首先工作所需要的复杂得多。
记得以后应用的css规则特朗普先前应用的css规则,除非应用了!important。
如果你想达到同样的目的:not(:first-child) 然后:
示例:
ul > li {
background-color:red;
}
将矛盾的规则应用于:有效的第一个孩子。
ul&gt;李:亲子{ 背景色:透明; }
与上述所有评论不同。这不需要jquery。
答案 5 :(得分:0)
您处理的HTML是错误的。或者您在加载锚标记之前执行代码 http://jsfiddle.net/pBpe5/