Select an anchor within a JQUERY Tab from a link o

2019-04-12 14:19发布

站内问答 / jQuery
1148 2 4

i'm a complete novice at JQuery and Javascript, and was hoping you could help me out with my problem.

I'm using JQuery 1.7.2 and JQuery-ui 1.10.3 Tabs.

From an external url, i want to be able to link to an anchor located within a JQuery tab, however the tab name itself is also an anchor.

I know how to activate the tab the anchor is located in 

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

but where do i go from there?

How do I specify the anchor I want to link to located in tab-1 from a url? 

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

Here's the 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>

Any help would be gratefully appreciated. Thanks

2条回答
劫难
2楼-- · 2019-04-12 14:52

I managed to get it working myself by supplying both the tab name and anchor name in the URL, and then parsing it with javascript.

Following that, I then passed the tab number to jquery to open the tab and did a simple animated scroll to the anchor.

e.g. URL is http://www mysite com#tab-3&#myanchor javascript is

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

This is using JQuery UI 1.10.3 and JQuery 1.7.2

TO address an issue using a mobile device, sometimes it will turn the second # into %23.

To fix the error, you would add this line above the last line:

  if(anc !== ''){
    anc = anc.replace('%23', '#');
  }
查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
3楼-- · 2019-04-12 15:02

I've found this, can this be helpful for you?

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)