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

问题

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

来源：https://stackoverflow.com/questions/14717726/clicking-link-changes-url-in-browser-bar-but-doesnt-actually-load-url-may-be

标签

hyperlink

href

anythingslider