如何通过Div ID更改Div样式
编辑:在下面添加了JS，每个用户的评论。我正在尝试实现的：
在一个单一的博客页面上，我想有两个按钮，“音频”(div视频“音频”)和“视频”(div id=“视频”)。
默认情况下，Video将被启用，并在div中显示视频播放器。如果用户单击Audio，浏览器会将URL的末尾更改为#audio，这会触发div样式更改。这将导致视频播放器被隐藏，而音频播放器变为可见。同样，如果用户再次单击Video，URL的末尾将更改为#video，这将触发div样式更改，并且音频播放器将变为隐藏状态，而视频播放器将变为可见状态。
相当多的研究使我能够切换单个div，但我不知道如何完成上面列出的内容。
当URL以#video结尾时
<div id="video" style="position: static; visibility: visible; overflow: visible; display: block;">MY VIDEO PLAYER</div>
<div id="audio" style="position: absolute; visibility: hidden; overflow: hidden; display: block;">MY AUDIO PLAYER</div><div id="video" style="position: absolute; visibility: hidden; overflow: hidden; display: block;">MY VIDEO PLAYER</div>
<div id="audio" style="position: static; visibility: visible; overflow: visible; display: block;">MY AUDIO PLAYER</div>我甚至不打算为此发布我的javascript。它只在打开和关闭单个div时起作用。值得一提的是，我不是一个程序员，但在我的旅程中，这个网站一直是我的goto。
非常感谢这个优秀的网站所能提供的任何帮助。
Edit:下面是我使用的js，它只允许切换单个div
<script>
function myFunction() {
var x = document.getElementById("video");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
</script>回答 2
Stack Overflow用户
发布于 2018-08-31 08:06:53
这是一个简单的js方法。我在这里做了一些假设(关于你的标记)。
function doMagic() {
let urlType = window.location.href,
audio = document.getElementById('audio'),
video = document.getElementById('video');
if (urlType.split('#')[1] === 'audio'{ //turn it into an array of two, split at the hash
audio.style.display = 'block';
video.style.display = 'none';
}
if (urlType.split('#')[1] === 'video'{
audio.style.display = 'none';
video.style.display = 'block';
}
}
// assuming you have a button element for this
let videoBtn = document.getElementById('vidBtn'),
audBtn = document.getElementById('audBtn');
vidBtn.addEventListener('click', function() { doMagic(); });
audBtn.addEventListener('click', function() { doMagic(); });两个事件侦听器调用相同的函数。如果您的按钮具有相同的类，那么您可以将其简化为一个事件侦听器。
// assuming your buttons have the class name "myBtn"
let theBtn = document.getElementByClass('myBtn');
theBtn.addEventListener('click', function() { doMagic(); }); Stack Overflow用户
发布于 2018-08-31 08:09:17
我找到的答案不是用普通的javascript完成的，而是一个叫做jquery的框架。您可以从他们的website或w3schools了解更多关于jquery的信息。下面是代码。
$("#audio").click(function(){
$("#audio").toggleClass("active");
$("#video").toggleClass("active");
});
$("#video").click(function(){
$("#video").toggleClass("active");
$("#audio").toggleClass("active");
});.active{
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="video" class = "active" style="position: static; visibility: visible; overflow: visible; display: block;">MY VIDEO PLAYER</div>
<br>
<div id="audio" style="position: static; overflow: hidden; display: block;">MY AUDIO PLAYER</div>
首先，我们检查id为audio的元素何时被点击，然后在视频id和音频id的active和inactive类之间切换。类似地，当我们检查要点击的id video时，我们在video id和audio id之间切换活动类。我希望这能有所帮助:)
https://stackoverflow.com/questions/52106732
复制相似问题