1

我正在使用任何滑块。我有一个指向某个页面和幻灯片的链接，如下所示：

<a href='http://sitename.com/pagename/#panel1-1'>Click Me</a>

为清楚起见进行了更新：问题是当我创建这样的链接时，当链接不在带有幻灯片的页面上时，指向页面和幻灯片的直接链接有效，但在同一页面上时无效作为幻灯片。因为我的网站上到处都有这些链接，而且它是动态的，所以我需要一种能够简单地链接到幻灯片的方法，它可以在任何页面上工作——包括幻灯片所在的页面。

我找到了一个解决方案 - 我像以前一样链接到幻灯片，然后动态更新该链接上的操作，以便链接与滑块出现在同一页面上的页面。

** 我的解决方案（我用于我的网站的要点，根据您的目的进行编辑）：**

//Get anythingslider links, and dynamically update them so that they jump to the slider
    $("a").each(function(){

        var pathname = window.location.pathname.replace(/^https?:\/\/critter.co/,'');

        var link = this.href.replace(/^https?:\/\/critter.co/,'');

        if(link.indexOf("/settings/home") == 0 && pathname.indexOf("/settings/home") == 0){
            $(this).removeAttr("href");
            slidenum = parseInt(link.charAt(link.length-1));
            $(this).click(function(){
                $("ul#slider").anythingSlider(link.charAt(link.length-1));
            });
        }

        if(link.indexOf("/record/home") == 0 && pathname.indexOf("/record/home") == 0){
            $(this).removeAttr("href");
            slidenum = parseInt(link.charAt(link.length-1));
            $(this).click(function(){
                $("ul#slider").anythingSlider(link.charAt(link.length-1));
            });
        }

    })
4

1 回答 1

0

我不太确定我理解你，页面在右侧。但我认为您遇到的问题是链接本身只是更改 URL 而不是幻灯片，对吗？

首先，pagename/链接到另一个页面，所以应该可以工作。如果您想从同一页面控制滑块，则只需要该#1-1部分；好吧，如果页面上有多个滑块。

一个滑块（演示）

  • 如果您只有一个滑块，则可以执行以下操作：

    <nav>
    Go to slide:
    <a href="#1">One</a> | <a href="#2">Two</a> | <a href="#3">Three</a> |
    <a href="#4">Four</a> | <a href="#5">Five</a>
</nav>

    并且此代码使滑块转到该特定幻灯片：

    $('nav a').click(function(){
    $('#slider').anythingSlider( $(this).attr('href').substring(1) );
});

多个滑块（演示）

  • 在这个 HTML 中，我在 href 属性中为滑块添加了一个索引 -#1-1表示滑块 1，面板 1。所以这里是一个用于多个滑块的导航示例（可以根据需要添加更多）：

    <nav>
    top slider: <a href="#1-1">One</a> | <a href="#1-2">Two</a> | <a href="#1-3">Three</a> |
    <a href="#1-4">Four</a> | <a href="#1-5">Five</a>
    <br>
    bottom slider: <a href="#2-1">One</a> | <a href="#2-2">Two</a> | <a href="#2-3">Three</a> |
    <a href="#2-4">Four</a> | <a href="#2-5">Five</a>
</nav>

    然后这段代码可以用来控制滑块：

    $('nav a').click(function(){
    var link = $(this).attr('href').match(/(\d+)-(\d+)/),
        slider = parseInt( link[1], 10 ) - 1; // eq needs zero based index
    $('.slider').eq( slider ).anythingSlider( link[2] );
});
于 2013-02-06T22:48:34.893 回答