html - 检查单选按钮是否被选中并显示 div

Question

我试过了This from stackoverflow

我没能去上类..

我有 .playlist-list 和 .playlist-feature，其中只应显示一个，并带有一个单选按钮以供检查。

所以无论哪个单选按钮被选中，它都应该显示:block the div。并隐藏另一个。

但不知何故它不起作用..

我可以从 .playlist-feature 正常显示开始，然后我检查另一个按钮。但在这里它似乎不起作用..

关于解决这个问题的任何想法？

我的代码:

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

我认为这个对你使用 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>