jQuery tabs may be not work on Internet Explorer 10

There is a small problem for any developer that using jQuery UI tabs (tested on jQuery 1.8.2 and jQuery UI 1.9.2). Your website or exactly the jQuery tabs on you website may be not work. It create tab anchors (tab title) right, but nothing occur when user click it because the tab content panels do not load exactly by the way it should be.

The problem is the <base> html tag on your website. If you website using <base> tag example:

example.htm
  1.         <base href="" />
  2.         <link href="tpls/ism/style/main.css" rel="stylesheet" />
  3.  
  4.         <link href="tpls/ism/style/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
  5.         <script src="tpls/ism/js/jquery-1.8.2.js"></script>
  6.         <script src="tpls/ism/js/jquery-ui-1.9.2.custom.js"></script>
  7.         <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
  8. </head>
Hide/show line number

jQuery tabs creation function will check if your tab anchor link is local, it mean the anchor href attribute have to start with "#" character. It also compare two href property between the anchor and the current location. If the <base> tag was defined, the comparison would be wrong. It may be the bug of Internet Explorer 10 only. The IE9, 8 and 7 have not. This is the source code of isLocal function in jQuery to check if the link is local:

jQuery-ui-1.9.2.custom.js
  1. function isLocal( anchor ) {
  2.         return anchor.hash.length > 1 &&
  3.                 anchor.href.replace( rhash, "" ) ===
  4.                         location.href.replace( rhash, "" )
  5.                                 // support: Safari 5.1
  6.                                 // Safari 5.1 doesn't encode spaces in window.location
  7.                                 // but it does encode spaces from anchors (#8777)
  8.                                 .replace( /\s/g, "%20" );
  9. }
Hide/show line number

So, to resolve the problem we have to do one of some thing below:

  • Remove the <base> html tag on your website. This action could be let your anchor link or your resource do not work correctly. If the href attribute of you base tag always is null, just remove the <base> tag without thinking.
  • Replace the isLocal function in jQuery as following:
    jquery-ui-1.9.2.custom.js
    1. function isLocal( anchor ) {
    2.     if (jQuery.browser.msie && jQuery.browser.version >= 10.0) {
    3.         return anchor.hash.length > 1;
    4.     }
    5.         return anchor.hash.length > 1 &&
    6.                 anchor.href.replace( rhash, "" ) ===
    7.                         location.href.replace( rhash, "" )
    8.                                 // support: Safari 5.1
    9.                                 // Safari 5.1 doesn't encode spaces in window.location
    10.                                 // but it does encode spaces from anchors (#8777)
    11.                                 .replace( /\s/g, "%20" );
    12. }
    Hide/show line number
    The replacement of isLocal function will be work on Internet Explorer 10 and not effect any other browser.

 Hope that helpful and could be fix the problem!