вкладки 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> 

При нажатии на вкладке Я хотел бы добавить идентификатор активной вкладки ко всем атрибутам 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

Вот ответ:

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

Answer 2

Использование событий click неверно для вкладок jQueryUI.

События, которые нужно использовать, создают и активируют.

В следующем фрагменте.

Если вам нужно иметь вкладку й выбираются при загрузке документа вам нужно вычислить это вместо того, чтобы установить активную вкладку 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>