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工具幻灯片和标签问题

回答

相关问题