我使用了這個滑塊，但有一個細節不符合我的願望。動態刪除最後一個邊框 - 右

事情是，我想要最後一個邊框 - 右鍵不顯示，但當我移動到滑塊時，我想更新它，所以我只得到最右邊的邊框沒有顯示。

我的意思是，例如，這是第一張幻燈片：a|b|c|d|，我想要a|b|c|d，然後當我點擊右箭頭我想獲得b|c|d|a（沒有最後一個邊框「|」）。

我希望我解釋清楚我究竟意味着:)

2012-11-19 Rapstyle

謝謝大家，特別是Yury和Rahul。我使用Rahul實現的jquery函數，並將Yury的CSS規則添加到我的頁面中。 – Rapstyle

-1

#box ul li:last-of-type{ 
    border-right: 0; 
}

來源

2012-11-19 11:29:36

「第一胎」和「最後一胎」都得到了更廣泛的支持。 – amustill

@amustill：你可以指定支持最後一個孩子但不是最後一個類型的主要瀏覽器嗎？ –

謝謝我將您的解決方案與rahul的解決方案一起使用。非常感謝 – Rapstyle

我已經更新您的jsfiddle here以顯示它的工作方法。

本質上，每次更新，它將last-child類添加到：last li。它在jQuery中完成而不使用CSS僞選擇器的原因純粹是爲了支持瀏覽器。如果你需要支持像IE 6/7/8這樣的瀏覽器，那麼這是做這件事的方法

來源

2012-11-19 11:31:37 SlashmanX

將你的border-right切換到border-left，然後只是:first-child。您可以使用last-child，但IE8也支持first-child。

http://jsfiddle.net/amustill/5AdgA/6/

來源

2012-11-19 11:32:40 amustill

我試過了，但我不知道爲什麼有些時候它可以工作（如果我開始切換左箭頭），有時它不會（例如，如果我點擊右箭頭超過2次）。無論如何感謝 – Rapstyle

，你可以做這樣的

$(document).ready(function() { 
    $('#box_ul li:first').before($('#box_ul li:last')); 
    $('#box_ul li').css('border-right','1px solid #d5d5d5'); 
    $('#box_ul li:last').css('border-right','none'); 
    $('#right_scroll_clienti').click(function(){ 
     var item_width = $('#box_ul li').outerWidth() + 10; 
     var left_indent = parseInt($('#box_ul').css('left')) - item_width; 
     $('#box_ul:not(:animated)').animate({'left' : left_indent},500,function(){  
      $('#box_ul li:last').after($('#box_ul li:first')); 
      $('#box_ul').css({'left' : '0px'}); 
      $('#box_ul li').css('border-right','1px solid #d5d5d5'); 
    $('#box_ul li:last').css('border-right','none'); 
     }); 

    }); 
    $('#left_scroll_clienti').click(function(){ 
     var item_width = $('#box_ul li').outerWidth() + 10; 
     var left_indent = parseInt($('#box_ul').css('left')) + item_width; 
     $('#box_ul:not(:animated)').animate({'left' : left_indent},500,function(){  
      $('#box_ul li:first').before($('#box_ul li:last')); 
      $('#box_ul').css({'left' : '0px'}); 
      $('#box_ul li').css('border-right','1px solid #d5d5d5'); 
    $('#box_ul li:last').css('border-right','none'); 
     }); 
    }); 
});

DEMO

來源

2012-11-19 11:33:21 rahul

謝謝我將您的解決方案與Yury Tarabanko的解決方案一起使用。非常感謝你 – Rapstyle

高興它可以幫助你 – rahul

檢查這一點，如果這滿足你的需要：http://jsfiddle.net/5AdgA/9/

我只是改變了一些CSS屬性，並加入一個DIV爲ul

.slidewrapper{width:935px; overflow:hidden;} //added on css class for the slider and some little changes, not much.

來源

2012-11-19 11:36:54 Jai

這些都是你的元素

<ul id="box_ul"> 
    <li><a href="#">a</li> 
    <li><a href="#">b</li> 
    <li><a href="#">c</li> 
    <li><a href="#">d</li> 
</ul>

爲了從您可以簡單地使用CSS下面最後一個元素刪除邊框：

box_ul李：最後一個孩子{右邊框：0}

只要確保你把後這條線（CSS規則）：#box UL李{}這個樣式規則

感謝。

來源

2012-11-19 11:36:57

我嘗試過，但它不爲我反正工作，謝謝。 – Rapstyle

動態刪除最後一個邊框 - 右

回答

box_ul李：最後一個孩子{右邊框：0}

相關問題