JavaScript Hashchange Jquery

[newbie101]

Hallo,

folgendes:
ich möchte den Content einer Seite mit der Jquery Funktion "load" befüllen. gleichzeitig möchte ich aber auch "Hashchange" benutzen um mit den Vor- und Zurückbutton navigieren zu können.

Das ganze funktioniert mit <a href="#test_1"></a> ganz gut, dh mit dem href Tag funktionierts.

Jez möchte ich das aber eben über die <li id=""></li> machen. Geht das und wenn ja wie?

Mfg

 $(document).ready(function(){
   $(function(){
  
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;
	alert(hash)
   
    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('li').each(function(){
      var that = $(this);
	  
    });
	
	// Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
	
  })
  
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
  
});

	$("a").click(function(){
		var test_id = $(this).attr("id"	)
		$("#content").load(test_id+".htm")
	})

 });

 

[metadings]

// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();

Deine <a>click's rufen hashchange automatisch auf, sofern es im href steht...
Mit einem <li>:

$(".meinLi").click(function () {
  var test_id = $(this).attr("id");
  $("#content").load(test_id + ".htm");
  window.location.hash = test_id; // triggert $(window).hashchange()
  // window.location.hash = '#' + test_id; // mit oder ohne # musst du testen...
});

Und vergiss nicht diverse Semikolon... Für ältere Browser brauchst du evtl. einen Workaround für window.onhashchange, so sehr lange gibt's das event noch nicht...
Möglicherweise änderst du auch zuerst den location.hash und reagierst dann erst mit einem .load darauf.

 

[PascalK]

Hi Newbie101,

dieser Hashtag kram ist recht veraltet. Ich empfehle dir daher History.js.

Damit machst du Gebrauch von der HTML5 History API. Du veränderst URLs ohne die Seite neuzuladen. Dies hat viele Vorteile:

• Keine häßlichen Hastags
• Benutzerfreundliche URLs
• SEO-freundliche URLs
• Vor und zurück Button funktioniert ebenfalls ohne Seitenreload
• ...

Viel Erfolg!

 

[metadings]

An dieser Stelle fehlt mir mal wieder der (ComputerBase-)DANKE Button!

 

[ice-breaker]

Man sollte aber nicht vergessen, dass die HTML4-Emulation von History.js viele ungelöste Bugs hat, kann man schön nachlesen. Das ist darauf zurückzuführen, dass jede Modifikation von dem Entwickler auf dutzenden Geräten getestet werden muss, deshalb wurde seit einem dreivirtel Jahr nicht eine Codezeile mehr verändert, das Projekt ist also ziemlich tot.