点击链接改变浏览器栏中的URL,但实际上并没有加载URL(可能是AnythingSlider相关)(

2019-10-17 15:57发布

我使用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));
            });
        }

    })

Answer 1:

我不太明白你的,配页是在右侧。 但我认为你所遇到的问题是链接本身只有改变网址,而不是幻灯片,对不对?

首先,在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] ); }); 


文章来源: Clicking link changes url in browser bar, but doesn't actually load URL (may be AnythingSlider related)