单击链接会更改浏览器栏中的 url，但实际上不会加载 URL(可能与 AnythingSlider 相关)

Question

我正在使用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

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

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

One Slider（演示）

• 如果你只有一个滑块，你可以这样做：

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