Jquery Post UI Tabs not linking properly with page-anchors

Question

I'm using page-anchors to direct users to particular tabs from a menu. However when you're on the page with the tabs clicking the link doesn't redirect. It simply changes the hash in the URL. Any idea how I could resolve this?

example link

http://www.website.com/page#1

This is on WordPress btw.

jQuery(document).ready(function($){
    $(function() {
        $( "#tabs" ).tabs();
    if(document.location.hash!='') {
            //get the index from URL hash
            tabSelect = document.location.hash.substr(1,document.location.hash.length);
        $("#tabs").tabs('select',tabSelect-1);
    }
    });
});

score 3 · Accepted Answer · edited May 23 '17 at 12:26

You need to listen to the hashchange event using jquery to detect when the hash changes, as these changes do not trigger a page load. See this answer for details: On - window.location.hash - Change?

Edit - more info

As the answer in the link above says, this works differently for different browsers, and ultimately you will get the best results from Ben Alman's script (as Joseph also mentions below). But lets break it down.

Here is a simple example that pushes the hash into an h1 tag:

<!DOCTYPE html>
<html>
<head>
<title>Hash Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    function getHash() {
        return document.location.hash.substr(1); 
    }

    $(document).ready(function() {
        if(document.location.hash != '') {
            $('#sectionName').html(getHash());
        }
        $(window).bind('hashchange', function() {
            $('#sectionName').html(getHash());
        });
    });
</script>
</head>

<body>
<h1 id="sectionName"></h1>
<a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
</body>
</html>

This example will work in most modern browsers, including IE8, with the caveat that just changing the hash in the URL will not create a new history entry in IE. Hash changes caused by user interaction will create history entries just fine.

If you intend to support IE7 and below then the best approach is to use Ben's plugin, which changes our code slightly because instead of using bind to listen to the event you subscribe to the event function created by the plugin:

<!DOCTYPE html>
<html>
<head>
<title>Hash Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
    function getHash() {
        return document.location.hash.substr(1); 
    }

    $(document).ready(function() {
        $(window).hashchange(function() {
            $('#sectionName').html(getHash());
        });
        //trigger the change for a hash set at page load
        if(document.location.hash != '') {
            $(window).hashchange();
        }
    });
</script>
</head>
<body>
    <h1 id="sectionName"></h1>
    <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
</body>
</html>

Mind explaining a little further how to accomplish this. I can't seem to get it to work. — Zach Shallbetter, Aug 19 '11 at 23:16

Joseph Silber · Answer 2 · 2011-08-15T19:16:09.857

You should use Ben Alman's jQuery plugin to listen to the hash change event, since it is not fully supported in older browsers.

http://benalman.com/news/2010/01/jquery-bbq-v11-and-jquery-hashchange-event-v10/

Case in point: even if you manually poll the hash, the back button will not work in IE6. That's because IE6 does not push a new history state upon hashchange. Ben's plugin takes care of this (by having an invisible iframe), as well as many more nuances.

Jquery Post UI Tabs not linking properly with page-anchors

2 Answers2

Linked