1

I am trying to link anchors inside jquery tabbed content. I have gotten it to work, however, now when I click on tabs the page jumps to the top of the tab-content div, and cuts off tabs. I would like it to stay in the same spot without scrolling when tabs are clicked. I also need to access each tab and inside anchor from a URL, just need the tab URL to not jump to top of tab-content div, cutting off tabs on top. example: http://mysite.com/test#tab1

Here is what I have so far: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$('a.refresh').live("click", function() {
      location.reload();
});
 });
</script>

<section class="wrap">

<div class="tablist">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>

</ul>
</div>
<div class="panes">
<div id="tab1" class="tab-content">
Tab 1 content
<br />
<a name="anchor1" id="anchor1">Anchor 1</a>
</div>

<div id="tab2" class="tab-content">
Tab 2 content
</div>

<div id="tab3" class="tab-content">
Tab 3 content
<br />
<a name="anchor2" id="anchor2">Anchor 2</a>
</div>

</div>
</section>

<script type="text/javascript">
$(document).ready(function() {
var $tabContent = $(".tab-content"),
    $tabs = $("ul.tabs li"),
    tabId;

$tabContent.hide();
$("ul.tabs li:first").addClass("current").show();
$tabContent.first().show();

$tabs.click(function() {
    var $this = $(this);
    $tabs.removeClass("current");
    $this.addClass("current");
    $tabContent.hide();
    var activeTab = $this.find("a").attr("href");
    $(activeTab).fadeIn();

});

// Grab the ID of the .tab-content that the hash is referring to
tabId = $(window.location.hash).closest('.tab-content').attr('id');

// Find the anchor element to "click", and click it
$tabs.find('a[href=#' + tabId + ']').click();
 })

$('a').not('.tabs li a').on('click', function(evt) {
evt.preventDefault();
var whereTo = $(this).attr('goto');
$tabs = $("ul.tabs li");
$tabs.find('a[href=#' + whereTo + ']').trigger('click');

$('html, body').animate({
    scrollTop: $('#'+whereTo+' a').offset().top });


 });
 </script>

Any thoughts, ideas, or help would be much appreciated!!

Thanks!

Air
  • 1
  • 1
  • 5

1 Answers1

1

You need to add this to the event to stop its default behavior

preventDefault();

See the documentation

So for any anchor tag that you need to stop its behavior

$('#yourselector').click(function(e){
    e.preventDefault();
});
Hazem Salama
  • 14,891
  • 5
  • 27
  • 31
  • I'm still having some issues with the tabbed URL, coming to a tab externally, for instance: http://www.mysite.com#tab1 ... it still jumps to top of tab-content div instead of top of page. Do you have any suggestions for that? – Air Aug 27 '12 at 16:30
  • Not sure what you're trying to do, appending #tab1 to a url will by default cause your page to scroll to the element with that ID, which in your case would be tab1, why would want it to go to the top of the page if that is what the link is for? – Hazem Salama Aug 27 '12 at 17:33
  • if someone is coming to the page directly from another page, we'd like them to be able to see the other tabs and header of the website, but have the desired tab open. hopefully that make sense :) – Air Aug 27 '12 at 17:43
  • However, if it is a url that has an anchor, #anchor1, appended to it, we'd like it to scroll down directly to that element ID. So, yes, we have two conflicting results – Air Aug 27 '12 at 17:45
  • If I understand you correctly, then you'd need to read off the URL params and act accordingly, you can read off params using this http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery – Hazem Salama Aug 27 '12 at 17:50
  • You wouldn't happen to know why this script doesn't work in IE, do you? (sorry, new to jquery) – Air Aug 27 '12 at 19:50
  • This is the only error: SCRIPT438: Object doesn't support property or method 'on' .... in regards to this: $('a').not('.tabs li a').on('click', function(evt) { – Air Aug 27 '12 at 20:19
  • The problem is that, when I go to the page via anchor url (mysite.com#anchor2) it takes the # hash and anchor away in the url and opens the default tab instead of opening the correct tab and scrolling down to the anchor. – Air Aug 27 '12 at 20:21