Listenelemente bei :not(...) speziell kennzeichnen

[Enrico]

Hallo,

ich habe über <ul>-Tags verschiedene Menülisten definiert.

Die einzelnen Menüs beinhalten bereits alle in der finalen Version verfügbaren Menüpunkte. Nun möchte ich diejenigen Menüpunkte, die noch nicht anklickbar sein sollen, weil noch keine gleichnamige Textdatei in einem bestimmten Verzeichnis besteht, gesondert kennzeichnen.

Ein Beispiel:

Das Menü "Band" beinhaltet die Unterpunkte "Mitglieder", "Biografie", "Bewerbung", "Press-Kit" und "Stage Rider".

Bestehen Textdateien für die Menüpunkte "Mitglieder", "Biografie" und "Stage Rider", aber noch nicht für "Bewerbung" und "Press-Kit", so sollen die Links "Bewerbung" und "Press-Kit" nicht anklickbar angezeigt werden.

Die Prüfung, ob die jeweilige Textdatei besteht, will ich mit folgendem JavaScript bewerkstelligen:

var http = ajaxInitialisieren();

function ajaxInitialisieren()
{
   if (window.XMLHttpRequest)
   {
      return new XMLHttpRequest()
   }
   else
   {
      try
      {
         return new ActiveXObject('MSXML2.XMLHTTP.6.0')
      }
      catch (e)
      {
         try
         {
            return new ActiveXObject('MSXML2.XMLHTTP.3.0')
         }
         catch (e)
         {
            return false
         }
      }
   }
}

function dateiAufExistenzPruefen (datei)
{
   http.open("HEAD", datei);
   http.onreadystatechange = rueckmeldungDateisucheVerarbeiten;
   http.send(null)
}

function rueckmeldungDateisucheVerarbeiten()
{
   if (http.readyState == 4)
   {
      if (http.status == 200)
      {
         return true
      }
      else
      {
         if (http.status == 404)
         {
            return false
         }
      }
   }
}

Der Code zum Aufbauen der nicht anklickbar zu kennzeichnenden Links sieht folgendermaßen aus:

seiten = ["mitglieder", "biografie", "bewerbung", "pressKit", "stageRider", ...weitere Angaben...];

for (w = 0; w < seiten.length; w++)
{
   if (false === dateiAufExistenzPruefen ("txt/" + seiten[w] + ".txt") )
   {
      link.className = seiten[w] + kennzeichen + "NichtVerfuegbar"
   }
}

Der css-Selector zur entsprechenden Kennzeichnung:

ul.untermenueBand li:not([class$=NichtVerfuegbar]):hover

Leider habe ich aber irgendwo einen (oder mehrere) Fehler, da die Kennzeichnung ignoriert wird und somit auch eigentlich als nicht anklickbar anzuzeigende Links anklickbar ausgegeben werden.

Könnt ihr mir bei der Beseitigung des/der Fehler/Fehlers bitte behilflich sein?

Besten Dank und Gruß Enrico

[Enrico]

Als Ergänzung:

so sieht ein Menü aus:

<ul class="untermenueBand">
   <li id="mitglieder"></li>
   <li id="biografie"></li>
   <li id="bewerbung"></li>
   <li id="pressKit"></li>
   <li id="stageRider"></li>
</ul>

Die optische Auszeichnung erfolgt dann über Zuweisung einer jeweiligen Klasse, die aus der ID ("mitglieder", "biografie",...) samt Kennzeichen für die Sprache ("D" oder "E") und des Status ("Aktiv" ohne hover-Effekt, "NichtVerfuegbar" für nicht anklickbare Links bzw. ganz ohne Status für verfügbare Links).

ul.untermenueBand li,
...weitere Menüs...
{
   background-position: top left;
   background-repeat:   no-repeat;
   cursor:              pointer;
   height:              20px;
   width:               100%
}

...weitere Definitionen...

.bewerbungD,
.bewerbungDNichtVerfuegbar,
.bewerbungDAktiv
{
   background: url(../grafiken/textlinkUntermenueBewerbungD.png)
}

.bewerbungE,
.bewerbungENichtVerfuegbar,
.bewerbungEAktiv
{
   background: url(../grafiken/textlinkUntermenueBewerbungE.png)
}

ul.untermenueBand li:not([class$=NichtVerfuegbar]):hover,
...weitere Definitionen...
{
   background-position: 0 -20px
}

Gruss Enrico

[Matthias Apsel]

Hallo Enrico,

   link.className = seiten[w] + kennzeichen + "NichtVerfuegbar"

ul.untermenueBand li:not([class$=NichtVerfuegbar]):hover

• Wie sehen die Klassennamen aus, die im Dokument stehen?
• [class$=NichtVerfuegbar] ist ein Tippfehler.
• Ich würde statt die Klasse zu ändern, einfach das href-Attribut entfernen.
• Muss es tatsächlich so umständlich sein? Kannst du nicht vorher (z.B. mit PHP) schon schauen, ob die Textdatei existiert und entsprechend reagieren?

Bis demnächst
Matthias

[Enrico]

Hallo Matthias,

danke für Deine schnelle Antwort.

Ich muss jetzt leider (und hoffentlich nur) kurz weg und melde mich später.

Gruß

Enrico

[Enrico]

Hallo Matthias,

ich denke, Dein Vorschlag, gleich mittels PHP nach dem Bestehen der erforderlichen Textdateien nachzuschauen, anstatt über AJAX, ist der bessere Ansatz, zumal ich ja, wenn ich das richtig sehe, pro einzelnem Aufruf eine Anfrage an den Server stellen muss und dies nicht sonderlich performant sein dürfte.

Gruß

Enrico

[Gunnar Bittersmann]

@@Matthias Apsel

• [class$=NichtVerfuegbar] ist ein Tippfehler.

?? Ich seh ihn nicht.

• Ich würde statt die Klasse zu ändern, einfach das href-Attribut entfernen.

Das allerdings.

• Muss es tatsächlich so umständlich sein? Kannst du nicht vorher (z.B. mit PHP) schon schauen, ob die Textdatei existiert und entsprechend reagieren?

Das auch.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

• [class$=NichtVerfuegbar] ist ein Tippfehler.

?? Ich seh ihn nicht.

Ja, vielleicht auch nicht. Wenn nämlich im Klassenbezeichner keine Leerzeichen sind, sonst ist es auch einfach nur overdressed.

Bis demnächst
Matthias