0

I am using the following code to switch tabs. But the problem is if i put the tabe id in url with #, it will not goto that specific tab. 

<a href="index.php#tab2">Tab 2</a>
<a href="index.php#tab3">Tab 3</a>

Below is the code

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

html code

        <ul class="tab-links">
            <li class="active"><a style="" href="#tab1">Account</a></li>
            <li><a href="#tab2">Jobs Posted</a></li>
            <li><a href="#tab3">Messages</a></li>
            <li><a href="#tab4">Post A Job</a></li>
        </ul>
<div class="tab-content">
    <div id="tab1" class="tab active" style="padding-bottom:30px;">
    </div>
    <div id="tab1" class="tab" style="padding-bottom:30px;">
    </div>
    <div id="tab1" class="tab" style="padding-bottom:30px;">
    </div>
</div>
Gijo Varghese
  • 11,264
  • 22
  • 73
  • 122
  • Please add html for the elements you are trying to show. Preferably create a JSFiddle that demonstrates the problem. – ekuusela Apr 29 '15 at 17:25
  • You could implement jQuery UI and use the tabs() method as seen here http://stackoverflow.com/questions/578348/switch-to-selected-tab-by-name-in-jquery-ui-tabs hope this helps – Hunter Frazier Apr 29 '15 at 17:26
  • you have to identify the elements that you show with id's - that is how the browser knows how to match the hash in the url to the element to scroll to. You also need some jquery to read the url and show the appropiate element and to select the appropiate tab – Scott Selby Apr 29 '15 at 17:34
  • i have added the html code too. @ekuusela – Gijo Varghese Apr 29 '15 at 17:36

1 Answers1

2

you could try modifying this line: var currentAttrValue = jQuery(this).attr('href').split("#")[1];

with that your getting the "tab2" part of the link's href attribute

jQuery(document).ready(function() {
    var changeTab = function(id) {
        // Show/Hide Tabs
        jQuery('.tab-content #' + id).show().siblings().hide();

        // Change/remove current tab to active
        jQuery('.tab-content #' + id + ':visible').addClass("active").siblings().removeClass('active');
    };

    jQuery('.tabs .tab-links a').on('click', function(e)  {
        e.preventDefault();
        // Here you will get the tab id, comming from the clicked hyperlink
        var currentAttrValue = jQuery(this).attr('href').split("#")[1];
        // Change/remove current tab to active
        jQuery(this).parents("li").addClass("active").siblings().removeClass('active');
        changeTab(currentAttrValue);
    });
  
    var tab = document.location.href.split("#");
    if(tab.length > 0) {
      var id = tab[1];
      jQuery('.tabs .tab-links a[href="#' + id + '"]').click();
      window.addEventListener("load",function() {
        jQuery(window).scrollTop(0);
      },true);
    }
});
.active {
  color:red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content">
<div id="tab1" class="tab active" style="padding-bottom:30px;">tab 1 content
</div>
<div id="tab2" class="tab" style="padding-bottom:30px;">tab 2 content
</div>
<div id="tab3" class="tab" style="padding-bottom:30px;">tab 3 content
</div>
</div>
<div class="tabs">
  
  <div class="tab-links">
    <a href="index.php#tab1">Tab 1</a>
    <a href="index.php#tab2">Tab 2</a>
    <a href="index.php#tab3">Tab 3</a>
  </div>
  
</div>
Santiago Hernández
  • 5,438
  • 2
  • 26
  • 34