проверка, если переключатель установлен и дисплей ДИВ

Question

я попробовал This from stackoverflow

, который я не смог заставить работать ..

я есть .playlist список и .playlist-функция, где только необходимо отобразить, с помощью переключателя для проверки.

так, что когда-либо был установлен переключатель, он должен отображать: блокировать div. и скрыть другое.

, но это как-то не работает ..

я могу начать с .playlist-функция отображается хорошо, где я проверить на другую кнопку. но здесь он не работает.

любая идея относительно решения этой проблемы?

Мой код:

HTML:

    <div class="playlist-top"> 
         <label for="playlist-button">Spilleliste</label> 
         <label for="playlist-feature-button">Indslag</label> 
        </div> 
        <input type="radio" id="playlist-list-button" /> 
        <input type="radio" id="playlist-feature-button" /> 
        <div class="playlist-content"> 
         <div class="playlist-list"> 
          <ul class="bar"> 
           <li> 
            <span>12:36</span ><p class="text-  uppercase">brian adams</p><span class="dr-icon-audio-boxed"></span> 
            <p>You Belong to me</p> 
           </li> 
          </ul> 
         </div> 
         <div class="playlist-feature"> 
          <ul class="bar"> 
           <li> 
            <span>08:51</span><span class="dr-icon-audio-boxed"></span> 
            <p>Gærdesmutten er sej trods sin beskedne størrelse</p> 
           </li> 
          </ul> 
         </div> 
        </div> 

Мой CSS

#playlist:checked ~div.playlist-toggle{ 

    .playlist-wrapper .container .playlist-content{ 
     .playlist-feature{ 
      display:block; 
     } 
    } 

} 



#playlist-list-button:checked ~div.playlist-toggle{ 
    .playlist-wrapper .container .playlist-content{ 
     .playlist-list{ 
      display:block; 
     } 
     .playlist-feature{ 
      display:none; 
     } 
    } 
} 

#playlist-feature-button:checked ~div.playlist-toggle{ 
    .playlist-wrapper .container .playlist-content{ 
     .playlist-feature{ 
      display:block; 
     } 
     .playlist-list{ 
      display:none; 
     } 
    } 
} 

Answer 1

я получил его на работу с этим:

, потому что список воспроизведения-контента прямо под входными данными, кажется, что он мог получить к нему доступ через это. поэтому я мог отображать div и скрывать его по своему усмотрению.

и класс по .playlist кнопки был неправильно .. он должен был .playlist-лист кнопка .. не знаю, почему я не видел, что раньше ..

#playlist-feature-button:checked ~ div.playlist-content { 
    .playlist-feature { 
     display: block; 
    } 

    .playlist-list { 
     display: none; 
    } 
} 

Answer 2

Я думаю, что это один полезный для вас с JQuery

Поместите этот код в заголовке,

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <style> 
     .playlist-list{ 
      display: block; 
     } 
     .playlist-feature{ 
      display:none; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $('input[type=radio][name=rb1]').change(function() { 
       if (this.value == 'playlist-list-button') { 
        $('.playlist-list').show(); 
        $('.playlist-feature').hide(); 
       } 
       else if (this.value == 'playlist-feature-button') { 
        $('.playlist-feature').show(); 
        $('.playlist-list').hide(); 
       } 
      }); 
     }); 
    </script> 

и HTML, как это

<div class="playlist-top"> 
     <label for="playlist-button" >Spilleliste</label> 
     <input type="radio" value="playlist-list-button" id="playlist-list-button" name="rb1" checked="" class="rb1" /> 
     <label for="playlist-feature-button" >Indslag</label> 
     <input type="radio" value="playlist-feature-button" id="playlist-feature-button" name="rb1" class="rb1"/> 
    </div>  

    <div class="playlist-content"> 
     <div class="playlist-list"> 
      <ul class="bar"> 
       <li> 
        <span>12:36</span ><p class="text-  uppercase">brian adams</p><span class="dr-icon-audio-boxed"></span> 
        <p>You Belong to me</p> 
       </li> 
      </ul> 
     </div> 
     <div class="playlist-feature"> 
      <ul class="bar"> 
       <li> 
        <span>08:51</span><span class="dr-icon-audio-boxed"></span> 
        <p>Gærdesmutten er sej trods sin beskedne størrelse</p> 
       </li> 
      </ul> 
     </div> 
    </div>