Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Wyświetlanie zakłw Tab Menu jeżeli istnieje DIV

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Wyświetlanie zakłw Tab Menu jeżeli istnieje DIV

Post 21.04.2017, 09:15:49

Witam,

Mam pytanie czy jest możliwość za pomocą czystego CSS zdefiniować czy dana zakładka ma się wyświetlać czy nie ? A ta funkcja miałaby być zależna od tego czy dany div pojawi się w .content

np. Jeżeli w opisie zostanie dodany div x to wtedy pojawi się odpowiednia zakładka.

Kod: Zaznacz cały
#container input {
   height: 2.5em;
   visibility: hidden;
}

#container label {
   background: #9ebcbd;
   border-radius: 6px 6px 0 0;
   cursor: pointer;
   display: block;
   float: left;
   font-size: 20px;
   color: #fff;
   font-weight: bold;
   height: 40px;
   line-height: 40px;
   margin-right: .15em;
   padding: 0 1.5em;
   text-align: center;
   border-left: 1px solid #fff;
   border-right: 1px solid #fff;
   border-top: 1px solid #fff;
}

#container input:hover + label {
   background: #40a5f4; 
   font-size: 20px;
   color: #fff;
   font-weight: bold;
}

#container input:checked + label {
   background: #fff;
   font-size: 20px;
   color: #40a5f4;
   font-weight: bold;
   position: relative;
   z-index: 6;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
}

#content {
   overflow: auto;
   background: #fff;
   border-radius: 0 .25em .25em .25em;
   min-height: 23em;
   position: relative;
   width: 100%;
   -webkit-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
   box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.25);
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   z-index: 5;
}

#Opis p{
   margin-bottom: 1em;
  text-align: justify;
}
#Opis ul {
   margin-left: 2em;
}

#content div {
   opacity: 0;
   padding: 1.5em;
   position: absolute;
   z-index: -100;
}

#pdescr_s1 p {
  margin-bottom: 0.5em;
  text-align: justify;
}

#pdescr_s2 p {
  margin-bottom: 0.5em;
  text-align: justify;
}


#container input#tab-1:checked ~ #content #iaiOpis,
#container input#tab-2:checked ~ #content #pdescr_s1,
#container input#tab-3:checked ~ #content #pdescr_s2 {
    opacity: 1;
    z-index: 100;
}


input.visible {
  visibility: visible !important;
}


Kod: Zaznacz cały
<div id="container">
      
       <input id="tab-1" type="radio" name="tab-group" checked="checked" />
    <label for="tab-1"><span>Opis</span></label>
      
       <input id="tab-2" type="radio" name="tab-group" />
       <label for="tab-2">Skład</label>
      
       <input id="tab-3" type="radio" name="tab-group" />
       <label for="tab-3">Przygotowanie</label>
      
       <div id="content">
          <div id="Opis">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula euismod nulla, a vehicula ipsum malesuada ac. Nulla fringilla purus vel justo fermentum, vel suscipit lectus aliquam. Suspendisse rutrum, felis luctus luctus maximus, ipsum purus elementum tortor, sit amet semper enim justo ac felis. Suspendisse quis vestibulum purus, id tincidunt leo. Suspendisse consectetur sagittis elit ut laoreet. Quisque facilisis quis arcu sit amet molestie. Pellentesque sit amet est sed leo posuere hendrerit et quis dui. Vivamus at lorem in risus euismod congue. Quisque ut dui felis. Quisque rhoncus arcu sed ante lobortis gravida. Phasellus hendrerit erat ac diam consectetur, a volutpat odio gravida.</p>
            </div>
         
            <div id="pdescr_s1" class="projector_longdescription">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula euismod nulla, a vehicula ipsum malesuada ac. Nulla fringilla purus vel justo fermentum, vel suscipit lectus aliquam. Suspendisse rutrum, felis luctus luctus maximus, ipsum purus elementum tortor, sit amet semper enim justo ac felis. Suspendisse quis vestibulum purus, id tincidunt leo. Suspendisse consectetur sagittis elit ut laoreet. Quisque facilisis quis arcu sit amet molestie. Pellentesque sit amet est sed leo posuere hendrerit et quis dui. Vivamus at lorem in risus euismod congue. Quisque ut dui felis. Quisque rhoncus arcu sed ante lobortis gravida. Phasellus hendrerit erat ac diam consectetur, a volutpat odio gravida.</p>
         </div>
         
             <div id="pdescr_s2" class="projector_longdescription">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula euismod nulla, a vehicula ipsum malesuada ac. Nulla fringilla purus vel justo fermentum, vel suscipit lectus aliquam. Suspendisse rutrum, felis luctus luctus maximus, ipsum purus elementum tortor, sit amet semper enim justo ac felis. Suspendisse quis vestibulum purus, id tincidunt leo. Suspendisse consectetur sagittis elit ut laoreet. Quisque facilisis quis arcu sit amet molestie. Pellentesque sit amet est sed leo posuere hendrerit et quis dui. Vivamus at lorem in risus euismod congue. Quisque ut dui felis. Quisque rhoncus arcu sed ante lobortis gravida. Phasellus hendrerit erat ac diam consectetur, a volutpat odio gravida.</p>
         </div>
         </div>
         </div>



Będę bardzo wdzięczny za pomoc !
mixw
Posty: 4
Dołączył(a): 20.04.2017

Re: Wyświetlanie zakłw Tab Menu jeżeli istnieje DIV

Post 21.04.2017, 09:46:07

Pojawił się pomysł definicji selektora :has (https://developer.mozilla.org/en-US/docs/Web/CSS/:has), ale na razie nie znajdziesz jego implementacji i przypuszczam, że jego obecność w najbliższych wydaniach specyfikacji jest mało prawdopodobna.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19504
Dołączył(a): 14.04.2002


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50042 zarejestrowanych użytkowników.
Najnowszy użytkownik: RichardLix


Nasi użytkownicy napisali:

  • 934668 wiadomości
  • w 246201 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)