Wählen Sie unter der CSS-Pseudoklasse Selektor

Ich verwende Bootstrap-Registerkarten, sowohl direkt unter <body>, als auch in einem .modal. Ich muss die Registerkarten nicht innerhalb einer .modal über css auswählen. Aber das funktioniert nicht:Wählen Sie unter der CSS-Pseudoklasse Selektor

var act = $("div:not(.modal) ul.nav li";

Intead .modal Inhalt abgesehen, wählt er auch die Registerkarten innerhalb .modal s. Ist dies eine bekannte Einschränkung, ist dies erreichbar? Gibt es einen Workaround dafür?

<body> 
    <div> 
     ... 
     <!-- More nested on actual code--> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" class="active"> 
       <a href="#" data-toggle="tab">Tab 1</a> 
      </li> 
      <li role="presentation"> 
       <a href="#" data-toggle="tab">Tab 2</a> 
      </li> 
     </ul> 
    </div> 
    ... 
    <div class="modal fade lookup" id="search-adjustment-report-header-modal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
        ... 
        <ul class="nav nav-tabs" role="tablist"> 
         <li role="presentation" class="active"> 
          <a href="#" data-toggle="tab">Tab 1</a> 
         </li> 
         <li role="presentation"> 
          <a href="#" data-toggle="tab">Tab 2</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

ich diese Abfrage tatsächlich benötigen einige Cookies für die Einstellung, Standard-Tab ausgewählt usw.

Quelle

2016-08-08 Gideon

Können Sie bitte zugehörigem Code schreiben –

Es ist eher keine Einschränkung, sondern ein Missverständnis dessen, wie: nicht funktioniert. – CBroe

Können Sie mindestens erforderlichen HTML hinzufügen, um das Problem zu reproduzieren? – Pugazh

var act = $("ul.nav > li:not(div.modal ul.nav > li)");

funktioniert gut: https://jsfiddle.net/ue6jqp23/1/

Quelle

2016-08-08 11:44:14 mxlse

In Javascript glaube ich es Ansatz würde etwas wie dieses:

Identifizieren Sie ausgewählte Registerkarten:

var tabs = document.querySelectorAll('.nav-tabs li'); 

for (var i = 0; i < tabs.length; i++) { 
    tabs[i].classList.add('selected-tab'); 
    var tabAncestor = tabs[i].parentNode; 

    while (tabAncestor.nodeName !== 'BODY') { 
     if (tabAncestor.classList.contains('modal')) { 
      tabs[i].classList.remove('selected-tab'); 
     } 
     tabAncestor = tabAncestor.parentNode; 
    } 
}

Dann können Sie einfach sammeln die Node List mit:

var selectedTabs = document.getElementsByClassName('selected-tab');

Beispiel:

var tabs = document.querySelectorAll('.nav-tabs li'); 
 

 
for (var i = 0; i < tabs.length; i++) { 
 
    tabs[i].classList.add('selected-tab'); 
 
    var tabAncestor = tabs[i].parentNode; 
 

 
    while (tabAncestor.nodeName !== 'BODY') { 
 
     if (tabAncestor.classList.contains('modal')) { 
 
      tabs[i].classList.remove('selected-tab'); 
 
     } 
 
     tabAncestor = tabAncestor.parentNode; 
 
    } 
 
}

.selected-tab a, span { 
 
color: rgb(255,0,0); 
 
}

<div> 
 
     <p>The tabs with <em>.selected-tab</em> class are indicated in <span>red</span>.</p> 
 
     <!-- More nested on actual code--> 
 
     <ul class="nav nav-tabs" role="tablist"> 
 
      <li role="presentation" class="active"> 
 
       <a href="#" data-toggle="tab">Tab 1</a> 
 
      </li> 
 
      <li role="presentation"> 
 
       <a href="#" data-toggle="tab">Tab 2</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    ... 
 
    <div class="modal fade lookup" id="search-adjustment-report-header-modal"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-body"> 
 
        ... 
 
        <ul class="nav nav-tabs" role="tablist"> 
 
         <li role="presentation" class="active"> 
 
          <a href="#" data-toggle="tab">Tab 1</a> 
 
         </li> 
 
         <li role="presentation"> 
 
          <a href="#" data-toggle="tab">Tab 2</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Quelle

2016-08-08 12:58:02 Rounin

Wählen Sie unter der CSS-Pseudoklasse Selektor

Antwort

Verwandte Themen