jquery .不是第一个或最后一个

Question

$('a').not(':first').not(':last').css('z-index', '90');

这样做。

我遇到了这个问题。有什么建议吗？

Answer 1

不确定这是否正是您所追求的，但我们开始...

我已经清理了相当多的代码，并删除了我认为与问题无关的部分，主要是 jQuery cookie 代码。我还优化了其他一些部分，例如上一个/下一个选项卡选择和 hash操纵

tab 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 个选项卡，并且您想要显示第三个选项卡，则所有元素的 z 索引可以相等，并且元素的自然 z 索引意味着第三个选项卡将位于顶部。

它可能最好地显示在(绘制得很糟糕的)矩阵中:

          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 &#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');
    });

    // 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');
});