Question

我试过This from stackoverflow

我无法上班..

我有.playlist-list和.playlist-feature，只有一个应该显示，并带有一个单选按钮进行检查。

所以哪个单选按钮被选中，它应该显示：阻止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>

Answer 2

我得到了它的工作：

因为播放列表内容正好在输入下，所以它似乎可以通过它访问它。所以我可以显示div并随意隐藏它。

并且.playlist-button上的类错了..它应该是.playlist-list-button ..不知道为什么我之前没有看到..

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

    .playlist-list {
        display: none;
    }
}

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

2 个答案: