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

i have 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 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 tab i'd id of active tab appended of href attributes in list of links. example, if second tab active, list of links 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 of appended links, active tab should opened on new page well. in example above, tab #2 should become active when new page loaded.

i have attempted adapt following, in present form of course changes text links rather appending href attributes.

function getselectedtabid(){     return $("#tabs .ui-tabs-panel:visible").attr("id"); }  $(function() {     $( "#tabs" ).tabs();      //update display of selected id      $("#tabs").click(function(e){          $("ul.links a").text(getselectedtabid());     });      //initalize selected id display         $("#tabs").click(); }); 

thanks in advance guidance!

the usage of click events wrong jqueryui tabs.

the events use create , activate.

in following snippet.

if need have tab x selected on document load need compute instead set active tab 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');        });        // next line 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');        });        // next line 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>