3

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

我正在使用 JQuery 1.7.2 和 JQuery-ui 1.10.3 选项卡。

从外部 url，我希望能够链接到位于 JQuery 选项卡内的锚点，但是选项卡名称本身也是一个锚点。

我知道如何激活锚所在的选项卡

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

但我从那里去哪里？

如何从 url 指定要链接到位于 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>

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

4

2 回答 2

2

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

之后，我将选项卡编号传递给 jquery 以打开选项卡，并对锚点进行简单的动画滚动。

例如 URL 是http://www mysite com#tab-3&#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', '#');
  }
于 2013-07-29T16:27:35.303 回答
1

我找到了这个，对你有帮助吗？

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

于 2013-07-12T12:47:49.037 回答