在下拉列表中更改iFrame,请点击

时间:2017-11-24 14:51:45

标签: javascript html5 bootstrap-4

我是编程新手,我正在尝试一些东西。 现在我已经陷入困境,此刻我正在制作一个网页。 我现在想要实现的是,如果我点击下拉菜单中的某个项目,它会将iFrame源更改为我想要的链接。我在这做错了什么?

 <div class="dropdown droplist">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Choose List
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#" id="#action-1">Party</a>
        <a class="dropdown-item" href="#">Furutre</a>
        <a class="dropdown-item" href="#">Late Night</a>
    </div>
</div>
<script>
    jQuery("#action-1").click(function (e) {
        function switchView() {
            document.getElementById("spotifycontainer").src =
                'https://open.spotify.com/embed/user/21sbumll6xursi72kr7vkspay/playlist/4VEIFU2doL7TdnolXXFd70';
        }
        e.preventDefault();
    });
</script>
<div>
    <iframe src="" class="spotifylist" width="1280" height="720" frameborder="0" allowtransparency="true" id="spotifycontainer">
    </iframe>
</div>

1 个答案:

答案 0 :(得分:0)

似乎你在尝试使用jQuery而不导入它。
始终确保打开控制台以检查方便的错误消息。

您可以在html中使用var customer = { name: "John Jack", speak: function() { return "my name is " + this.name; }, address: { street: '123 main st', city: 'Pittsburgh', state: 'PA' } } document.write(customer.speak());来调用这样的JS函数

onClick

然后您可以创建一个看起来像这样的<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#" onClick="switchView('party')">Party</a> <a class="dropdown-item" href="#" onClick="switchView('future')">Furutre</a> <a class="dropdown-item" href="#" onClick="switchView('lateNight')">Late Night</a> </div> 方法

switchView