问题描述:

I have a list of links:

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

And below that some jQuery tabs:

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

When clicking on a tab I'd like the ID of the active tab to be appended to all of the href attributes in the list of links. For example, if the second tab is active, then the list of links would be:

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

Then, when clicking on any of the appended links, the active tab should be opened on the new page as well. So in the example above, tab #2 should become active when the new page is loaded.

I have attempted to adapt the following, which in its present form of course just changes the text for all the links rather than appending the href attributes.

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();

});

Thanks in advance for any guidance!

网友答案:

The usage of click events is wrong for the jQueryUI Tabs.

The events to use are create and activate.

In the following the snippet.

If you need to have the tab x selected on document load you need to compute this instead to set active tab to 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>
网友答案:

Here's the answer:

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)
    })
});
相关阅读:
Top