Code verkürzen, bei Abfrage für aktiv für einen Link

[Andreas...]

Hallo,
toll das es so ein cooles Forum gibt. Ich habe die letzten Stunden ziemlich viele Beiträge gelesen.
Nun habe ich eine Frage! Ich habe ein Listen Menü mittels css erstellt. Nun habe ich versucht, wenn der Link aktiv ist diesen farblich hervorzuheben.

Der normale Link ist so

<li><a href="index.php?cat=plugin">Plugins</a></li>

wenn er aktiv ist schaut er so aus

<li id="active"><a id="current" href="index.php?cat=plugin">Plugins</a></li>

und das wäre meine Abfrage in PHP, so das er Link aktiv ist wenn er aktiv ist:

echo'<li';  
if ($cat=='plugin') {echo' id="active"'; }  
echo'><a href="index.php?cat=plugin"';  
if ($cat=='plugin') {echo' id="current"';}  
echo'>Plugins</a></li>';

Ich finde das es ziemlich unübersichtlich ist, aber funktionell. Gibt es Möglichkeiten dieses Wirrwarr zu verkürzen, bzw. übersichtlicher zu machen?

Andreas

[Felix Riesterer]

Lieber Andreas...,

// HTML-Ausgaben puffern (falls Header noch gesendet werden müssen)  
$html = '';  
  
$html .= [link:http://de2.php.net/manual/de/function.sprintf.php@title=sprintf](  
    '<li%1$s><a%2$s href="index.php?cat=plugin">Plugins</a></li>',  
    ($cat != 'plugin' ? '' : ' id="active"'),  
    ($cat != 'plugin' ? '' : ' id="current"')  
);  
  
// weiterer Programmverlauf  
  
echo $html;

Sieht das besser aus?

Liebe Grüße,

Felix Riesterer.

[dedlfix]

Tach!

wenn er aktiv ist schaut er so aus
<li id="active"><a id="current" href="index.php?cat=plugin">Plugins</a></li>

IDs dienen dazu, Elemente zu identifizieren. Das heißt, IDs werden an solchen Stellen eingesetzt, wo man ansonsten einen Namen vergeben würde. active und current sind, auch wenn sie nur einmalig im Dokument vorkommen, eher eine Klassifizierung. Das class-Attribut wäre hier meines Erachtens angebrachter.

Weiterhin könnte es sein, dass bereits ein Attribut ausreichend für das Styling wäre. Man kann sehr gut das a mit .active a ansprechen. Aber das endgültig zu entscheiden ist der gezeigte Ausschnitt zu klein.

und das wäre meine Abfrage in PHP, so das er Link aktiv ist wenn er aktiv ist:

  

> echo'<li';  
> if ($cat=='plugin') {echo' id="active"'; }  
> echo'><a href="index.php?cat=plugin"';  
> if ($cat=='plugin') {echo' id="current"';}  
> echo'>Plugins</a></li>';

Ich finde das es ziemlich unübersichtlich ist, aber funktionell. Gibt es Möglichkeiten dieses Wirrwarr zu verkürzen, bzw. übersichtlicher zu machen?

Ja, zum Beispiel alles in einem if mit else notieren:

if ($cat == 'plugin')  
  echo '<li class="active"><a id="current" href="index.php?cat=plugin">Plugins</a></li>';  
else  
  echo '<li><a href="index.php?cat=plugin">Plugins</a></li>';

Etwas kürzer geht es in dem Fall auch mit sprintf(), oder hier besser printf(), weil du ja gleich ausgibst.

printf('<li %s><a href="index.php?cat=plugin" %s>Plugins</a></li>',  
  $cat == plugin ? 'class="active"' : '',  
  $cat == plugin ? 'class="current"' : '');

Oder in der vereinfachten Form ohne extra Klassifzierung des a:

printf('<li %s><a href="index.php?cat=plugin">Plugins</a></li>',  
  $cat == plugin ? 'class="active"' : '');

dedlfix.

[Bobby]

Moin

Oder:

  
echo '<li '.($cat == plugin ? 'class="active"' : '').'><a href="index.php?cat=plugin">Plugins</a></li>',  

:p

viele Wege führen nach Rom.

Gruß Bobby

[Gunther]

Hallo Andreas!

Nun habe ich eine Frage! Ich habe ein Listen Menü mittels css erstellt.

Nur der Ordnung halber: Du hast eine Liste mit (X)HTML erstellt, und per CSS ...

... hast du versucht, wenn der Link aktiv ist, diesen farblich hervorzuheben.

Der normale Link ist so

<li><a href="index.php?cat=plugin">Plugins</a></li>

wenn er aktiv ist schaut er so aus

<li id="active"><a id="current" href="index.php?cat=plugin">Plugins</a></li>

Hmmm ..., wenn er "aktiv" ist, heißt das, dass ich mich auf der Seite befinde!?
Wenn dem so ist, solltest du den Link durch ein SPAN Element ersetzen, da "man" nicht auf die jeweils aktuelle Resource/ Seite verlinken sollte. ;-)

Im übrigen reicht es auch aus, wenn du lediglich dem LI Element eine entsprechende Id/ Klasse verpasst. Nachfolgende Elemente lassen sich dann bei Bedarf im CSS selektieren.

und das wäre meine Abfrage in PHP, so das er Link aktiv ist wenn er aktiv ist:

echo'<li';

if ($cat=='plugin') {echo' id="active"'; }
echo'><a href="index.php?cat=plugin"';
if ($cat=='plugin') {echo' id="current"';}
echo'>Plugins</a></li>';

>   
> Ich finde das es ziemlich unübersichtlich ist, aber funktionell. Gibt es Möglichkeiten dieses Wirrwarr zu verkürzen, bzw. übersichtlicher zu machen?  
  
Felix hat dir ja schon eine Möglichkeit gepostet.  
Generell würde ich empfehlen, Strings immer erst komplett zusammen zu bauen und dann einmalig auszugeben.  
  
Ist 'plugin' der einzige mögliche Wert für cat?  
Wenn nicht, empfiehlt sich evt. die Verwendung von 'switch'. Oder du packst die Werte in ein Array, welches du in einer 'foreach' Schleife abarbeitest (um das Menü zu generieren) und dabei auf die aktuelle Seite prüfst.  
  
Und warum so "hässliche" URLs? ;-)  
Warum nicht: http://example.com/plugins  
  
  
Gruß Gunther

[Andreas...]

Danke an alle, so viele Antworten. Ich abe mir von jeder etwas rausgepickt und siehe da, man sieht wieder etwas vor lauter Bäumen. Ich habe etwas zu WIRR gedacht:

  
echo'<li><a '; if ($cat=='plugin') {echo' id="current" ';}  
echo'href="index.php?cat=plugin">Plugins</a></li>';  

Andreas

[Baba]

Danke an alle, so viele Antworten. Ich abe mir von jeder etwas rausgepickt und siehe da, man sieht wieder etwas vor lauter Bäumen. Ich habe etwas zu WIRR gedacht:

echo'<li><a '; if ($cat=='plugin') {echo' id="current" ';}
echo'href="index.php?cat=plugin">Plugins</a></li>';

  
Zunächst: ich würde das immer templatebasiert machen. Das heisst, ich würde versuchen ein Template für die Listeneinträge erstellen und mit Platzhaltern versehen, welches ich dann parse. Php und html so per echo zu verbinden halte ich für keine so gute Idee.  
  
Dennoch: Straight forward würde ich Dir noch etwas anderes vorschlagen, da Du ja wahrscheinlich nicht nur ein Item hast:  
  
~~~php
// Menü-Inhalt definieren: "cat_id" => "Label"  
$MenuItems = array(  
  "plugin" => "Plugins",  
  "demo"  => "Demo",  
  "download" => "Downloads",  
);  
  
// aktuellen Menüpunkt ermitteln  
$CatSelected  = $_GET["cat"];  
  
// Ausgabe vorbereiten  
$Menu = "<ul>";  
foreach($MenuItems as $CatId=>$MenuItem){  
  
  $class_li  = ($CatId == $CatSelected) ? "class='active'"  : "";  
  $class_a   = ($CatId == $CatSelected) ? "class='current'" : "";  
  $href      = "index.php?cat=$CatId";  
  
  $Menu.= "<li $class_li><a $class_a href='$href' title='$MenuItem'>$MenuItem</a>";  
  
}  
$Menu.= "</ul>";  
  
// Ausgabe  
echo $Menu;

Und ich würde hier definitiv auch Klassen verwenden. Gutes Gelingen.

Cheers,
Baba

[Malcolm Beck´s]

હેલો

Zunächst: ich würde das immer templatebasiert machen. Das heisst,

Das ist eine gute Idee.

Dennoch: Straight forward würde ich Dir noch etwas anderes vorschlagen, da Du ja wahrscheinlich nicht nur ein Item hast:

Dein Code ist aber etwas verbesserungswürdig.

// aktuellen Menüpunkt ermitteln
$CatSelected  = $_GET["cat"];

Das umkopieren ist hier völlig überflüssig.

$class_li  = ($CatId == $CatSelected) ? "class='active'"  : "";
  $class_a   = ($CatId == $CatSelected) ? "class='current'" : "";
  $href      = "index.php?cat=$CatId";
  $Menu.= "<li $class_li><a $class_a href='$href' title='$MenuItem'>$MenuItem</a>";

Hier vergisst du die Kontextgerechte Behandlung. Die $_item gehören durch htmlspecialchars gejagt, da sie im HTML-Kontext angezeigt werden.

/* in etwa so */  
$_item = isset($_GET["cat"]) AND urldecode ($_GET["cat"]) == $href  
       ? sprintf('<li><a href="?cat=%1$s">%2$s</a></li>', urlencode ($href), htmlspecialchars($name))  
       : sprintf('<li><a>%s</a></li>', htmlspecialchars($name)) ;  
  
/* Menu nur ausgeben, wenn eins existiert */  
print $_item ? '<nav><ul>' . $Menu . '</ul></nav>' : '<p>Keine Einträge gefunden</p>' ;  
  

બાય

[dedlfix]

Tach!

Danke an alle, so viele Antworten. Ich abe mir von jeder etwas rausgepickt und siehe da, man sieht wieder etwas vor lauter Bäumen. Ich habe etwas zu WIRR gedacht:

echo'<li><a '; if ($cat=='plugin') {echo' id="current" ';}
echo'href="index.php?cat=plugin">Plugins</a></li>';

  
Das Ergebnis sieht mir ein bisschen so aus wie bei politischen Entscheidungen. Das Beste bleibt auf der Strecke und es entsteht ein mehr oder weniger schlechter Kompromiss.  
  
Code muss lesbar für Menschen sein. Auch wenn es technisch möglich ist, alles in eine Zeile zu schreiben, sollte man das nach Möglichkeit nicht tun. Ein paar mehr Leerzeichen schaden auch nicht. Dein jetziger Code einigermaßen ordentlich formatiert ergibt:  
  
~~~php
echo '<li><a ';  
if ($cat == 'plugin')  
  echo ' id="current" ';  
echo 'href="index.php?cat=plugin">Plugins</a></li>';

Damit hast du gegenüber der Ausgangsvariante noch nicht viel gewonnen. Und der HTML-Code ist auch zweimal unterbrochen. Schau dir im Vergleich dazu nochmal die Platzhalter-Variante an:

printf('<li><a %s href="index.php?cat=plugin">Plugins</a></li>',  
  $cat == 'plugin' ? 'id="current"', '');

Das ist wirklich nur noch eine Anweisung, nur aufgeteilt in zwei Zeilen, und das HTML steht einigermaßen zusammenhängend nebeneinander.

dedlfix.

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

Hmmm ..., wenn er "aktiv" ist, heißt das, dass ich mich auf der Seite befinde!?
Wenn dem so ist, solltest du den Link durch ein SPAN Element ersetzen, da "man" nicht auf die jeweils aktuelle Resource/ Seite verlinken sollte. ;-)

oder das href-Attribut weglassen.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

Hmmm ..., wenn er "aktiv" ist, heißt das, dass ich mich auf der Seite befinde!?
Wenn dem so ist, solltest du den Link durch ein SPAN Element ersetzen, da "man" nicht auf die jeweils aktuelle Resource/ Seite verlinken sollte. ;-)

oder das href-Attribut weglassen.

Oder das - aber nur, wenn es sich um HTML5 handelt.
Ansonsten ist das 'href' Attribut für 'a' zwingend erforderlich.

In HTML5 heißt das Ganze dann übrigens "placeholder hyperlink".

Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

Ansonsten ist das 'href' Attribut für 'a' zwingend erforderlich.

imho stimmt das nicht.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Ansonsten ist das 'href' Attribut für 'a' zwingend erforderlich.

imho stimmt das nicht.

und zwar deshalb nicht, weil das a-Element ursprünglich als Link oder Anker konzipiert war.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

Ansonsten ist das 'href' Attribut für 'a' zwingend erforderlich.

imho stimmt das nicht.

Imho könntest du Recht haben ... (im Netz steht aber manchmal auch Sch...rott!). ;-)
Das ergibt sich ja eigentlich auch schon daraus, dass Anker im Dokument als <a ...> ausgezeichnet werden, und das eben ohne 'href' Attribut.

Und dann nehme ich das jetzt mal als "Argument".
Als Autor muss man sich also überlegen, was einem semantisch "korrekter" erscheint: Ein 'span' Element, oder ein 'a' Element ohne 'href' Attribut (imho ein Anker).

Persönlich bevorzuge ich rein "intuitiv", wie sehr viele andere Autoren auch, das 'span' Element.

Jetzt alles soweit korrekt? ;-)

Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

Das ergibt sich ja eigentlich auch schon daraus, dass Anker im Dokument

... früher ...

als <a ...> ausgezeichnet

<del>werden</del><ins>wurden</ins>

, und das eben ohne 'href' Attribut.

heute fungiert jedes beliebige Element mit einer ID als Anker.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

... früher ...

als <a ...> ausgezeichnet
<del>werden</del><ins>wurden</ins>
, und das eben ohne 'href' Attribut.

heute fungiert jedes beliebige Element mit einer ID als Anker.

Ach Gott ..., ich werd' halt langsam alt ...! :-P

Gruß Gunther