Clicking link changes url in browser bar, but does

2019-08-10 12:37发布

问题:

I'm using AnythingSlider. I have a link to a certain page and slide, like this:

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

Updated for clarity: the problem was that when I create a link like this, the direct link to the page & slide works when the link isn't on the page with the slide, but it doesn't work when it's on the same page as the slide. Since I have these links all over my site, and it's dynamic, I needed a way to be able to simply link to a slide, that would work on any page - including the page where the slide is.

I found a solution - I'm linking to the slide just as I was before, and then dynamically updating the action on that link for pages where the link appears on the same page as the slider.

** My solution (the gist I used to my site, edit to suit your purposes): **

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

    })

回答1:

I'm not quite sure I understand you, with pages being on the right side. But I think the issue you're having is the link itself is only changing the URL and not the slides, right?

First off, the pagename/ is linking to another page, so that should be working. If you want to control the slider from the same page, you'll only need the #1-1 part; well, if you have multiple sliders on the page.

One Slider (demo)

  • If you only have one slider, you can do something like this:

    <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>
    

    and this code to go make the slider go to that particular slide:

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

Multiple Sliders (demo)

  • In this HTML, I've added an index for the slider in the href attribute - #1-1 means slider 1, panel 1. So here is an example of a nav for multiple sliders (more can be added as desired):

    <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>
    

    Then this code can be used to control the sliders:

    $('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] );
    });