Updating the url with selected tabs href

Question

I'm using Jquery UI (gem "jquery-ui-rails", "~> 4.2.0") in my rails app and want to implement tabs so for this i have this code

 <script>
  $(function() {
  $( "#tabs" ).tabs();
  });
</script>

<div id="tabs">
  <ul>
    <li><a href="#overview">overview</a></li>
    <li><a href="#about">about</a></li>
    <li><a href="#people">people</a></li>
  </ul>
  <div id="overview">
    <p>sit amet facilisis feugiat citudin mi sit amet mauris.</p>
  </div>
  <div id="about">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
  </div>
  <div id="people">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.p>
  </div>
</div>

I want to make tabs linkable so when i click in the about tab I have a URL like this www.mysite.com/companies/google?tab=about is this possible if yes how can I do it?

Answer 1

Try http://www.yoursite.com/companies/google#about The tabs widget should look at the hash automatically

Answer 2

You can update the url inside the beforeActivate event's callback as shown below:

$('#tabs').tabs({
  beforeActivate: function(event, ui) {
    var href = window.location.href;
    window.location.href = href.split("#")[0] + ui.newTab.find("a").attr("href");
  }
});