使用选定的选项卡 href 更新 url答案

【问题标题】：Updating the url with selected tabs href使用选定的选项卡 href 更新 url
【发布时间】：2014-11-22 23:21:18
【问题描述】：

我在我的 rails 应用程序中使用 Jquery UI (gem "jquery-ui-rails", "~> 4.2.0") 并且想要实现选项卡所以为此我有这个代码

 <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>

我想让选项卡可链接，所以当我点击关于选项卡时，我有一个类似这样的 URL www.mysite.com/companies/google?tab=about 如果可以，我该怎么做？

【问题讨论】：

标签： javascript jquery jquery-ui tabs jquery-ui-tabs

【解决方案1】：

试试http://www.yoursite.com/companies/google#about 标签小部件应该会自动查看哈希

【讨论】：

【解决方案2】：

您可以更新beforeActivate事件回调中的url，如下所示：

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

【讨论】：