jquery工具幻燈片和標籤問題

我創建了以下示例來說明我有一個jQuery工具幻燈片的問題。當我滾動到內容窗格下方的導航點時，我想讓底部標題列表突出顯示。jquery工具幻燈片和標籤問題

http://testing.lukem.co.uk/slider/slideshow.htm

這是一段時間，因爲我已經做任何JavaScript或jQuery的，所以任何指針感激地接受！

我想我可以使用API和/或標籤索引達到目的。

非常感謝，

2010-07-07 codecowboy

這不是很漂亮，但我很快就破解了一起：

$(".slidetabs a").mouseover(function() { 
    // clear styles from the other elements 
    $(".headline-list a").removeClass("current"); 
    // find the corresponding headline and highlight it 
    $(".headline-list a:eq(" + $(this).index() + ")").addClass("current"); 
});

希望它能幫助。另外，你真的應該把所有的DOM引用代碼包裝在你傳遞給document.ready（）函數的處理程序中，這將確保它只在DOM完全生成後才能運行。如果你不這樣做，那麼當你試圖查詢它們時，你的腳本中引用的元素（例如「.slidetabs」）是否實際上存在於頁面中，這種說法有點兒諷刺意味。下面是使用的document.ready（）與您的代碼示例：

$(document).ready(function() { 
    // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready 

    var api = $(".slidetabs").tabs(".images > div",{api: true}); 

    api.onClick(function (tabIndex) { 
     console.log(tabIndex); 
     if (tabIndex === 0) { 
     $("headline-list > li > a.current").hide(); 
     } 
    }); 

    // removed the shorthand $(function() { }); part 
    // since the whole thing is inside the more readable document.ready handler now 

    $(".slidetabs,.headline-list").tabs(".images > div", {event:'mouseover'},{ 

     // enable "cross-fading" effect 
     effect: 'fade', 
     fadeOutSpeed: "slow", 

     // start from the beginning after the last tab 
     rotate: true 

    }).slideshow(); 
});

來源

2010-07-07 17:43:39 Faisal

添加一個ID給每個「標籤」（被顯示爲點），你就可以找到相應的標題元素從它。從那裏，它只是確保它是唯一一個與類current。

<!-- the tabs --> 
<div class="slidetabs"> 
    <a id="tab_0" class="current" href="#"></a> 
    <a id="tab_1" href="#"></a> 
    <a id="tab_2" href="#"></a> 
</div> 

... 

$(".slidetabs a").mouseover(function() { 
    $(".headline-list li a").removeClass("current"); 
    var id = $(this).attr("id").substr(4); 
    $(".headline_"+id).addClass("current"); 
})

你可能想使headline_X類IDS - 除非其實也希望讓每個多重，但他們似乎更喜歡獨特的標識符，其行爲相同的元素的類。

來源

2010-07-07 17:57:55 Chadwick

jquery工具幻燈片和標籤問題

回答

相關問題