1

AnythingSlider を使用しています。次のような特定のページとスライドへのリンクがあります。

<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パーツのみが必要です。ページに複数のスライダーがある場合。

One Slider (デモ)

  • スライダーが 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 に答える