選擇滑塊選項卡中選定的導航項並添加類

我目前有一個滑塊，當它處於活動狀態時，它會自動滑動，並嚮導航菜單中的每個選項卡添加一組ui-tabs。選擇滑塊選項卡中選定的導航項並添加類

我想要的是將選定的類（ui-tabs-selected）添加到其他當前不活動的元素。例如，我有5個導航選項卡，標記爲1到5，如果3是活動的，我想1和2具有UI選項卡選定的類。如果選擇4，我希望1,2和3具有選定的UI選項卡等等。

我目前一直在測試它只是選項卡1和2，但似乎無法得到它的工作，我添加了一個if else addClass未選中，即使＃nav-fragment-2已經返回選擇類的ui-tabs選項顯示我的代碼內有問題，或者我正在做的事情是完全錯誤的方式:)

我已經在下面發佈了我的代碼，目前使用的是帶有ui的jQuery特色內容滑塊。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".ui-tabs-nav").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 
    if ($('#nav-fragment-2').hasClass('ui-tabs-selected')) { 
$('#nav-fragment-1').addClass('.ui-tabs-selected'); 
} else { 
$('#nav-fragment-1').addClass('no-selected'); 
} 
}); 

</script>

的導航菜單：

<ul class="ui-tabs-nav"> 
    <li class="nav-item tk-report" id="nav-fragment-1"><a href="#fragment-1"><img src="{site_url}assets/images/main/how-1.png" width="28" height="28" alt="" /><span>1</span></a></li> 
    <li class="nav-item tk-report" id="nav-fragment-2"><a href="#fragment-2"><img src="{site_url}assets/images/main/how-2.png" width="28" height="28" alt="" /><span>2</span></a></li> 
    <li class="nav-item tk-report" id="nav-fragment-3"><a href="#fragment-3"><img src="{site_url}assets/images/main/how-3.png" width="28" height="28" alt="" /><span>3</span></a></li> 
    <li class="nav-item tk-report" id="nav-fragment-4"><a href="#fragment-4"><img src="{site_url}assets/images/main/how-4.png" width="28" height="28" alt="" /><span>4</span></a></li> 
    <li class="nav-item tk-report" id="nav-fragment-5"><a href="#fragment-5"><img src="{site_url}assets/images/main/how-4.png" width="28" height="28" alt="" /><span>5</span></a></li> 
</ul>

編輯：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".ui-tabs-nav").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 
$('.nav-item.tk-report.ui-tabs-selected').prevAll().addClass('.ui-tabs-selected'); 
}); 

</script>

來源

2012-02-07 Ben

您還有困難嗎？ – gdoron 2012-02-07 11:16:01

可與一行代碼來完成。使用jQuery的prevAll功能：

$('.nav-item.tk-report.ui-tabs-selected').prevAll().addClass('ui-tabs-selected');

該代碼將選擇與三種類型的元素：
nav-item + tk-report + ui-tabs-selected然後遍歷到他的兄弟姐妹和添加他們ui-tabs-selected類

prevAlldocs：

描述：獲取集合中每個元素的所有前面的兄弟元素o f 匹配的元素，可選通過選擇器進行過濾

來源

2012-02-07 09:45:08 gdoron

感謝您的快速響應。我明白你的意思了。我已經將js輸入到我的代碼中，但仍然沒有任何反應，所選標籤仍然正常工作，但不會將u-tabs選擇的類添加到以前的標籤中。我用我的新js編輯了我的代碼。謝謝 – Ben 2012-02-07 10:07:14

@本。我在類名中寫了'.'：'addClass（'。ui-tabs-selected'）'=>'addClass（'ui-tabs-selected'）'我現在修復了它。希望它能訣竅 – gdoron 2012-02-07 10:27:01

嗨gdoron。我試過你的建議只是爲了得到相同的結果：/。不確定它是否與用戶界面選擇的jQuery ui類有關。是否值得嘗試創建一個與自定義js不同的類並使用它？如果有這樣的建議？ – Ben 2012-02-08 00:03:10

選擇滑塊選項卡中選定的導航項並添加類

回答

相關問題