检查，如果单选按钮被选中并显示DIV

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>