Question

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

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

为了清晰起见而更新：问题在于，当我创建这样的链接时，指向该页面的直接链接＆amp;当链接不在带幻灯片的页面上时，幻灯片可以正常工作，但当它与幻灯片位于同一页面时，它不起作用。由于我在我的网站上都有这些链接，而且它是动态的，我需要一种能够简单地链接到幻灯片的方法，该幻灯片适用于任何页面 - 包括幻灯片所在的页面。

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

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

//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));
            });
        }

    })

Answer 1

我不太清楚我理解你，页面在右边。但我认为您遇到的问题是链接本身只是更改网址而不是幻灯片，对吧？

首先，pagename/链接到另一个页面，因此应该正常工作。如果你想从同一页面控制滑块，你只需要#1-1部分;好吧，如果页面上有多个滑块。

一个滑块（demo）

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

<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) );
});

多个滑块（demo）

在这个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] );
});

单击链接更改浏览器栏中的URL，但实际上并未加载URL（可能与AnythingSlider相关）

1 个答案:

一个滑块（demo）

多个滑块（demo）