Question

我创建了以下示例来说明我使用jquery工具幻灯片显示的问题。当我滚动内容窗格下方的导航点时，我希望底部的标题列表突出显示。

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

有一段时间以来我已经完成了任何javascript或jquery所以任何指针都感激不尽！

我想我可以使用API和/或标签索引来实现它。

非常感谢，

Answer 1

它不漂亮，但我很快就把它砍成了这个：

$(".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();
});

Answer 2

为每个“标签”添加一个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类ID - 除非实际上期望每个都有多个，但它们看起来更像是行为相同的元素类的唯一标识符。

Jquery工具幻灯片和标签问题

2 个答案: