Question

我是JQuery和Javascript的新手，希望你能解决我的问题。

我正在使用JQuery 1.7.2和JQuery-ui 1.10.3标签。

从外部网址，我希望能够链接到位于JQuery标签内的锚点，但标签名称本身也是一个锚点。

我知道如何激活锚点位于

中的标签

e.g. http://mysite.com/#tab-1

但我从哪里去？

如何从网址指定我想要链接到tab-1中的锚点？

e.g. http://mysite.com/#tab-1#myanchor

这是HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" media="all"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() 
  {var tabs = $( "#tabs" ).tabs(); 
   tabs.find( ".ui-tabs-nav" ).sortable(
     {axis: "x",
      stop: function() 
        {tabs.tabs( "refresh" );
        }
     }
    );
  }
);
</script> 
</head>

<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab-1">1st Tab</a></li>
      <li><a href="#tab-2">2nd Tab</a></li>
      <li><a href="#tab-3">3rd Tab</a></li>
    </ul>
    <div id="tab-1">
      <h2>1st Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Maecenas at dui tempor, adipiscing nisl id, tempus nisi. 
         Donec posuere pulvinar lacus, non suscipit eros ultrices. 
      </p>   
    </div> <!-- end of tab-1 div -->

    <div id="tab-2">
      <h2>2nd Tab</h2>
      <p>Suspendisse lacus mi, ornare quis nulla eget, commodo 
         auctor arcu. Proin ut erat vestibulum, vestibulum odio 
         sit amet, dapibus nisi. Morbi nec semper mi. 
      </p>
    </div> <!-- End of tab-2 div -->

    <div id="tab-3">
      <h2>3rd Tab</h2>
      <p>Proin ullamcorper ornare ultricies. Morbi bibendum 
         mauris eu purus rhoncus, id lacinia sapien placerat. 
         Nunc euismod lectus eu elit accumsan dignissim.
      </p>   
      <p><b><span id="myanchor">Anchor is here</span></b>
      </p> 
    </div> <!-- End of tab-3 div -->        
  </div> <!-- End of tabs div -->  
</body>

任何帮助将不胜感激。感谢

Answer 1

我发现了这个，这对你有帮助吗？

http://raw10.cust.magicedit.com/sandbox/jqueryTabs/

Answer 2

我设法通过在URL中提供选项卡名称和锚名称，然后使用javascript解析它来使自己工作。

然后，我将选项卡号传递给jquery以打开选项卡，并为锚点做了一个简单的动画滚动。

e.g。网址为http://www mysite com＃tab-3＆amp; #myanchor javascript是

$(document).ready(function(){
  var hash_parts = location.hash.split('&', 2); //2 - limit, may be changed if more than two arguments.
  var tab        = hash_parts[0];               // Tab number part of url.  Array starts at 0 for 1st element.
  var anc        = hash_parts[1];               // Anchor name.
  var tabId      = tab.split("-").pop()-1;      // Tab no. relating to Jquery ui index no. (starts at zero for tab 1.)  

  $("#tabs").tabs("option", "active", tabId);  // Select the tab.
  $('html, body').animate({'scrollTop': $(anc).offset().top}, 1000); // Animated scroll to anchor.
});

这是使用JQuery UI 1.10.3和JQuery 1.7.2

要解决使用移动设备的问题，有时会将第二个＃转换为％23。

要修复错误，您可以在最后一行上方添加此行：

  if(anc !== ''){
    anc = anc.replace('%23', '#');
  }

从另一个网页上的链接中选择JQUERY选项卡中的锚点

2 个答案: