jQuery 选项卡：将活动选项卡 ID 附加到列表中的所有 href 属性

Question

我有一个链接列表：

<ul class="links">
    <li><a href="link-1.html">Page 1</a></li>
    <li><a href="link-2.html">Page 2</a></li>
    <li><a href="link-3.html">Page 3</a></li>
</ul>

下面是一些 jQuery 标签：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">First tab content</div>
    <div id="tabs-2">Second tab content</div>
    <div id="tabs-3">Third tab content</div>
</div>

单击选项卡时，我希望将活动选项卡的 ID 附加到链接列表中的所有 href 属性。例如，如果第二个选项卡处于活动状态，则链接列表将为：

<ul class="links">
    <li><a href="link-1.html#tabs-2">Page 1</a></li>
    <li><a href="link-2.html#tabs-2">Page 2</a></li>
    <li><a href="link-3.html#tabs-2">Page 3</a></li>
</ul>

然后，当单击任何附加链接时，活动选项卡也应在新页面上打开。因此在上面的示例中，标签#2 应该在加载新页面时激活。

我尝试修改以下内容，目前的形式当然只是更改所有链接的文本，而不是附加 href 属性。

function getSelectedTabId(){
    return $("#tabs .ui-tabs-panel:visible").attr("id");
}

$(function() {
    $( "#tabs" ).tabs();

    //update the display of the selected id 
    $("#tabs").click(function(e){
         $("ul.links a").text(getSelectedTabId());
    });

    //initalize the selected id display    
    $("#tabs").click();
});

提前感谢您的指导！

Answer 1

对于 jQueryUI 选项卡，点击事件的使用是错误的。

要使用的事件是创建和激活。

在下面的代码段中。

如果您需要在文档加载时选择标签 x，您需要计算它以将活动标签设置为 0：

$(function () {
  var hashTab = window.location.hash;
  var activeTab = 0;
  if (hashTab.length > 0) {
    activeTab = $('a[href^="#tabs-"]').index($('a[href="' + hashTab + '"]'));
  }
  $( "#tabs" ).tabs({
    active: activeTab,
    create: function(event, ui) {
      $("ul.links a").attr('href', function(index, attr) {
        this.href = attr.substr(0, attr.indexOf('#') == -1 ? attr.length : attr.indexOf('#')) + ui.tab.children().attr('href');
      });
      // the next line is only for testing purposes
      $("ul.links a").text(function(index, text) {
        this.text = text.substr(0, text.indexOf('#') == -1 ? text.length : text.indexOf('#')) + ui.tab.children().attr('href');
      });
    },
    activate: function(event, ui) {
      $("ul.links a").attr('href', function(index, attr) {
        this.href = attr.substr(0, attr.indexOf('#') == -1 ? attr.length : attr.indexOf('#')) + ui.newTab.children().attr('href');
      });
      // the next line is only for testing purposes
      $("ul.links a").text(function(index, text) {
        this.text = text.substr(0, text.indexOf('#') == -1 ? text.length : text.indexOf('#')) + ui.newTab.children().attr('href');
      });
    }
  });
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<ul class="links">
    <li><a href="link-1.html">Page 1</a></li>
    <li><a href="link-2.html">Page 2</a></li>
    <li><a href="link-3.html">Page 3</a></li>
</ul>


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">First tab content</div>
    <div id="tabs-2">Second tab content</div>
    <div id="tabs-3">Third tab content</div>
</div>

Answer 2

答案如下：

https://forum.jquery.com/topic/maintain-active-tab-through-multiple-page-loads

https://jsfiddle.net/jakecigar/1qu0zgrp

$(function () {
    var hashTab = window.location.hash;
    var activeTab = 0;
    if (hashTab.length > 0) {
      activeTab = $('a[href^="#tabs-"]').index($('a[href="' + hashTab + '"]'));
    }

    console.log(activeTab)
    hashLinks()

    $("#tabs").tabs({
      active: activeTab,
      activate: function(event, ui) {
        location.hash = ui.newTab.find("[href]").prop("hash")
        console.log(location.hash)
        hashLinks()
      }
    })

    function hashLinks() {
      $(".links a").prop("hash", location.hash)
    }
    $("button").click(function() {
      location.reload(true)
    })
});

jQuery 选项卡：将活动选项卡 ID 附加到列表中的所有 href 属性

jQuery tabs: append active tab ID to all href attributes in a list

jquery

append

jquery-ui-tabs