{"id":28,"date":"2023-08-25T17:32:31","date_gmt":"2023-08-25T17:32:31","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=28"},"modified":"2023-08-25T17:32:31","modified_gmt":"2023-08-25T17:32:31","slug":"hashchange","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/hashchange\/","title":{"rendered":"hashchange"},"content":{"rendered":"

\nhashchange event<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Enables bookmarkable #hash history.<\/p>\n

  • jQuery( ".selector" ).on( "hashchange", function( event ) { ... } )<\/h4><\/li><\/ul>\n
    \n\t\t

    The jQuery Mobile .hashchange()<\/code> event handler enables very basic bookmarkable #hash history by providing a callback function bound to the window.onhashchange event. The onhashchange event fires when a window's hash changes.<\/p>\n\t\t

    In browsers that support it, the native HTML5 window.onhashchange event is used. In IE6\/7 (and IE8 operating in "IE7 compatibility" mode), a hidden iframe is created to allow the back button and hash-based history to work.<\/p>\n\t\t

    This plugin extends jQuery's built-in method. If jQuery UI is not loaded, calling the .hashchange()<\/code> method may not fail directly, as the method still exists. However, the expected behavior will not occur.<\/p>\n\t\t

    \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t
    1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    19<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
    		\n\t\t\t\t\t
    $(function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
      \/\/ Bind an event to window.onhashchange that, when the hash changes, gets the<\/span><\/code><\/div><\/div>
      \/\/ hash and adds the class "selected" to any matching nav link.<\/span><\/code><\/div><\/div>
      $( window<\/span> ).hashchange(function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
        var<\/span> hash = location.hash;<\/code><\/div><\/div>
     <\/code><\/div><\/div>
        \/\/ Set the page title based on the hash.<\/span><\/code><\/div><\/div>
        document<\/span>.title = "The hash is "<\/span> + ( hash.replace( \/^#\/<\/span>, ""<\/span> ) || "blank"<\/span> ) + "."<\/span>;<\/code><\/div><\/div>
     <\/code><\/div><\/div>
        \/\/ Iterate over all nav links, setting the "selected" class as-appropriate.<\/span><\/code><\/div><\/div>
        $( "#nav a"<\/span> ).each(function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
          var<\/span> that = $( this<\/span> );<\/code><\/div><\/div>
          that[ that.attr( "href"<\/span> ) === hash ? "addClass"<\/span> : "removeClass"<\/span> ]( "selected"<\/span> );<\/code><\/div><\/div>
        });<\/code><\/div><\/div>
      });<\/code><\/div><\/div>
      \/\/ Since the event is only triggered when the hash changes, we need to trigger<\/span><\/code><\/div><\/div>
      \/\/ the event now, to handle the hash the page may have loaded with.<\/span><\/code><\/div><\/div>
      $( window<\/span> ).hashchange();<\/code><\/div><\/div>
    });<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t
    iFrame source: example1.html<\/span>\n\t\t\t