5202

ein Blog über technische Fragen zu Blogger

Aktive Tab im Seiten-Gadget bei nicht_statischen Seiten hervorheben

von

Update 2: Ein Problem mit den Alias-URL's von Blogger wurde behoben!

Eine Leserin hat folgendes, sehr interessantes Problem aufgeworfen: Im Seiten-Gadget von Blogger wird nur von statischen Seite der aktive Tab hervorgehoben. Bei anderen Links, etwa auf ein Label, funktioniert das nicht.

Wie bekommt ihr für _alle_ Links den jeweils aktiven Tab markiert?

jQuery

Obwohl es einfach aussieht, ist das ein komplexes Problem - to make a long story short: Wir lösen das mit jQuery!

Dabei lesen wir die URL der jeweilige Seite aus und vergleichen sie mit den Links im Seiten-Gadget. Stimmen Link und URL übereinander, geben wir ein aktives Tab - ansonsten nicht.

Praktisch sucht ihr dazu den _schließenden_ </body> Tag [schaut genau!] in eurem Layout. Der liegt ziemlich tief. Direkt _darüber_ fügt ihr dieses Snippet ein:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
   var regex = /blogspot.[a-zA-Z.]{2,5}/gi; 
   var loc = $(location).attr('href').replace(regex,'blogspot.de');
   $("#PageList1 a").each(function() {
      if (loc.indexOf($(this).attr("href")) != -1) {
      $('#PageList1 li').removeClass('selected');
      $(this).parent().addClass("selected");
     }
    });
});
//]]>
</script>

Sollte für alle nur denkbare Seitentypen funktionieren - Label-Links, Such-Links und-so-weiter. Meldet euch, falls es Probleme gibt!

Update 1: Eine elegantere Lösung für das Problem stammt von Leser Felix

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
  var url = window.location;
  $('#PageList1 a[href="'+url+'"]').parent().addClass('selected');
});
//]]>
</script>

Funktioniert beides - die zweite Lösung allerdings nur für volle Links, also nicht die Kurfassung wie /search/label/foo.