For the site I help out with, xcat.sf.net, I used jquery-ui tabs.\u00a0 The only issue I had was that I couldn’t do back button, and I started getting a few complaints from it…<\/p>\n
So, after about 20 minutes of investigation, here is the code I used to make it work.\u00a0 It works pretty well for cases when you navigate externally, but doesn’t work when you press the back button while on the page, expecting to go to the previous tab.\u00a0 The jQuery team says that they’re working on this but its not in there today. Also, my approach refreshes the entire page with each click, that’s how I get the right page.\u00a0 So it may not be optimal for many places.\u00a0 Anyway, here is what I do:<\/p>\n
<script type=”text\/javascript”>
\n$(document).ready(function(){
\nvar start = window.location.href.lastIndexOf(“#”);
\nvar tabIndex = 0;
\nif (start !== -1){
\ntabIndex = window.location.href.substring(start+1, start+2);
\n}
\n$(‘#tabs’).tabs({
\nselected: tabIndex,
\nspinner: ‘Retrieving data…’,
\nselect: function(event,ui){
\nwindow.location = “#” +\u00a0 ui.index;
\nwindow.location.reload();
\n},
\n});
\n});
\n<\/script><\/p>\n
Then, down below in the HTML, I have:<\/p>\n
<div id=’tabs’>
\n<ul>
\n<li><a href=”about.html”>About<\/a><\/li>
\n<li><a href=”download.html”>Download<\/a><\/li>
\n<li><a href=”start.html”>Getting Started<\/a><\/li>
\n<li><a href=”docs.html”>Documentation<\/a><\/li>
\n<li><a href=”support.html”>Support<\/a><\/li>
\n<li><a href=”test.html”>Testimonials<\/a><\/li>
\n<\/ul>
\n<\/div><\/p>\n
That makes it so that the back button is supported.\u00a0 It changes the URL a bit, by giving it a nasty #<tabindex> but it does the trick for me.<\/p>\n","protected":false},"excerpt":{"rendered":"
For the site I help out with, xcat.sf.net, I used jquery-ui tabs.\u00a0 The only issue I had was that I couldn’t do back button, and I started getting a few complaints from it… So, after about 20 minutes of investigation, here is the code I used to make it work.\u00a0 It works pretty well for…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[40,1],"tags":[41],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/99"}],"collection":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=99"}],"version-history":[{"count":2,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/99\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}