Komplexer CSS-Selektor für Elternteil des aktiven Kindes

Question

Gibt es eine Möglichkeit, ein übergeordnetes Element auf der Grundlage der Klasse eines untergeordneten Elements in der Klasse auszuwählen? Das Beispiel, das für mich relevant ist, bezieht sich auf die HTML-Ausgabe eines netten Menü-Plugins für http://drupal.org . Die Ausgabe sieht folgendermaßen aus:

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

Meine Frage ist, ob es möglich ist, einen Stil auf das Listenelement anzuwenden, das den Anker mit der aktiven Klasse enthält. Natürlich würde ich es vorziehen, dass das Listenelement als aktiv markiert wird, aber ich habe keine Kontrolle über den Code, der erzeugt wird. Ich könnte diese Art von Sache mit Javascript (JQuery Federn in den Sinn) durchführen, aber ich frage mich, ob es eine Möglichkeit, dies mit CSS-Selektoren zu tun ist.

Nur um klar zu sein, möchte ich eine Formatvorlage auf das Listenelement anwenden, nicht auf den Anker.

Answer 1

Der erste Entwurf von Selektoren Stufe 4 skizziert einen Weg, um explizit die Thema eines Selektors. Dies würde es dem OP ermöglichen, das Listenelement mit dem Selektor $li > a.active

Von Bestimmen des Subjekts eines Selektors :

Der folgende Selektor stellt zum Beispiel ein Listenelement LI unique child einer geordneten Liste OL dar:

OL > LI:only-child

Das folgende Beispiel stellt jedoch eine geordnete Liste OL dar, die ein einziges Kind hat, wobei dieses Kind ein LI ist:

$OL > LI:only-child

Die Strukturen, die durch diese beiden Selektoren dargestellt werden, sind dieselben, aber die Subjekte der Selektoren sind es nicht.

Edit: Angesichts der Tatsache, dass ein Spezifizierungsentwurf sehr unausgegoren sein kann, ist es am besten, wenn Sie den Stand der Dinge in der CSSWG-Seite zu Selektoren Stufe 4 .

Answer 2

Ich hatte das gleiche Problem mit Drupal. In Anbetracht der Beschränkungen von CSS, ist der Weg, um diese Arbeit zu bekommen, um die "aktive" Klasse zu den übergeordneten Elementen hinzufügen, wenn das Menü HTML generiert wird. Es gibt eine gute Diskussion darüber unter http://drupal.org/node/219804 Das Ergebnis ist, dass diese Funktionalität in die Version 6.x-2.x des nicemenus-Moduls übernommen wurde. Da sich dieses Modul noch in der Entwicklung befindet, habe ich den Patch auf 6.x-1.3 zurückportiert unter http://drupal.org/node/465738 damit ich weiterhin die produktionsreife Version des Moduls verwenden kann.

Answer 3

Ich bin auf das gleiche Problem gestoßen wie der ursprüngliche Poster. Es gibt eine einfache Lösung, indem man einfach .parent() jQuery-Selektor. Mein Problem war, ich war mit .parent 代わりに .parent() . Ein dummer Fehler, ich weiß.

Binden Sie die Ereignisse (in diesem Fall, da meine Registerkarten in Modal sind, musste ich sie binden mit .live anstelle einer einfachen .click .

$('#testTab1 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab1 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})
$('#testTab2 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab2 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})

Hier ist die HTML..

<div id="tabView1" style="display:none;">
  <!-- start: the code for tabView 1 -->
  <div id="testTab1" style="width:1080px; height:640px; position:relative;">
    <h1 class="Bold_Gray_45px">Modal Header</h1>
    <div class="tabBleed"></div>
    <ul class="tabs">
      <li class="current"> <a href="#" class="tabLink" id="link1">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-1">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
      <li> <a href="#" class="tabLink" id="link2">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-2">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Natürlich können Sie dieses Muster wiederholen mit mehr LI's

Answer 4

Viele Menschen antworteten mit jQuery Elternteil, aber um das noch zu ergänzen, wollte ich einen kurzen Codeschnipsel mit Ihnen teilen, den ich für das Hinzufügen von Klassen zu meinen Navs verwende, damit ich das Styling zu li die nur Untermenüs haben und nicht li die das nicht tun.

$("li ul").parent().addClass('has-sub');

Answer 5

Mir ist gerade ein weiterer Gedanke gekommen, der eine reine CSS-Lösung sein könnte. Zeigen Sie Ihre aktive Klasse als absolut positionierten Block an und legen Sie seinen Stil so fest, dass er das übergeordnete li verdeckt.

a.active {
   position:absolute;
   display:block;
   width:100%;
   height:100%;
   top:0em;
   left:0em;
   background-color: whatever;
   border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
    position:relative;
}    

Für diejenigen unter Ihnen, die Javascript ohne Jquery verwenden möchten...

Die Auswahl des Elternteils ist trivial. Sie benötigen eine getElementsByClass Funktion einer Art, es sei denn, Sie können Ihr Drupal-Plugin dazu bringen, dem aktiven Element eine ID anstelle der Klasse zuzuweisen. Die Funktion, die ich zur Verfügung gestellt habe, habe ich von einem anderen Genie auf SO übernommen. Es funktioniert gut, denken Sie nur daran, wenn Sie debuggen, dass die Funktion immer ein Array von Knoten zurückgeben wird, nicht nur einen einzelnen Knoten.

active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");
    for (i = 0, j = 0; i < elsLen; i++) {
       if ( pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
   }
}
return classElements;
}