问题
$('a').not(':first').not(':last').css('z-index', '90');
do this.
I'm having problem with this. any suggestion?
回答1:
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');
});
回答2:
That jQuery seems fine to me, maybe debug some more? Or try something like:
$("a:not(:first):not(:last)").css('z-index', '90');
回答3:
Try with this
$('a').not('li:first, li:last').css('z-index', '90');
回答4:
try :first-child and :last-child
回答5:
All your answer's are far more complex than they need to be to get not first working.
Remember later applied css rules trump earlier applied css rules except when !important is applied.
If you want to achieve the same as :not(:first-child) Then:
- Apply the rule to all elements of that.
Example:
ul > li {
background-color:red;
}
Apply the contradicting rule to the :first-child which does work.
ul > li:first-child { background-color:transparent; }
Unlike all of the comments above. This DOES NOT require jquery.
回答6:
Either your HTML you working on is wrong. Or you are executing the code before the anchor tag loaded.
http://jsfiddle.net/pBpe5/
来源：https://stackoverflow.com/questions/9975723/jquery-not-first-or-last