Javascript 如何按Div ID更改Div样式

编辑：根据用户评论在下面添加JS。关于我正在努力实现的目标：

在单个博客页面上，我希望有两个按钮，“Audio”（div id=“Audio”）和“Video”（div id=“Video”）

默认情况下，视频将被启用并在div中显示视频播放器。如果用户单击音频，浏览器会将URL的结尾更改为#Audio，从而触发div样式的更改。这将导致视频播放器隐藏，音频播放器可见。同样，如果用户再次单击视频，则URL的结尾将更改为#Video，从而触发div样式的更改，音频播放器将隐藏，视频播放器将可见

相当多的研究使我能够打开和关闭单个div，但我不知道如何完成上面列出的内容

这是我的div声明

当URL以#video结尾时

我的视频播放器
我的音频播放器

当URL以#audio结尾时

我的视频播放器
我的音频播放器

我甚至不打算为此发布我的javascript。它仅用于打开和关闭单个div。我应该提到的是，我不是一个程序员，但在我的旅程中，这个网站一直是我的目标。第一次提问

非常感谢这个杰出的网站能提供的任何帮助

编辑：这里是我使用的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>

函数myFunction（）{
var x=document.getElementById（“视频”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}

我的第一个想法是使用以下样式表规则，尽管我目前无法进行检查：

*，
：：之前，
：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
.包装纸{
宽度：80vw；
保证金：1em自动；
边框：1px实心#000；
}
#音频，
#录像带{
/*默认情况下隐藏两个元素：*/
可见性：隐藏；
}
#音频：目标，
#视频：目标{
/*显示id为的元素
文档的哈希（'在
URL'）*/
能见度：可见；
}

我的视频播放器
我的音频播放器

这里是一个简单的js方法。我在这里做一些假设（关于您的标记）

两个事件侦听器调用相同的函数。如果按钮具有相同的类，则可以将其简化为一个事件侦听器

// assuming your buttons have the class name "myBtn"
let theBtn = document.getElementByClass('myBtn');

theBtn.addEventListener('click', function() { doMagic(); }); 

---

我发现答案不是用普通的javascript，而是用一个叫做jquery的框架。 下面是代码

$（“#音频”）。单击（函数（）{
$（“#音频”）。切换类别（“活动”）；
$（“#视频”）。切换类别（“活动”）；
});
$（“#视频”）。单击（函数（）{
$（“#视频”）。切换类别（“活动”）；
$（“#音频”）。切换类别（“活动”）；
})；

.active{
背景颜色：蓝色；
}

我的视频播放器


我的音频播放器

reddit's/r/learnprogramming应该是你的第一步，你会在这里被杀。但是请发布你的js，其他人会很感激，他们也不会那么生气，“因为你已经完成了家庭作业”（使用CSS），我确实建议将您的javascript发布到这里。它将告诉我们您正在做什么，以及我们如何提供最佳帮助。我建议您将内联样式声明从div移到一个单独的CSS文件中。如果您想使任何内容动态，内联样式定义只会使事情变得更加困难。我不知道关于这一点。一个全新的世界为我打开了。这看起来很有希望。David。不幸的是，我需要视频在默认情况下可见。然后，如果用户单击音频，视频将被隐藏。否则，您的代码工作得很好。David，感谢您和所有其他人的关注。我更熟悉CSS，因此我喜欢这个解决方案。O我遇到的一个问题是，ID显然会导致浏览器跳转。是否存在一些我不知道的语法可以使浏览器保持在原位？这有点违背了我对ID的设想。我需要每个DIV元素（音频/视频）当用户单击音频或视频时，在不跳到另一个或将另一个移动到另一个之下的情况下替换另一个。这有意义吗？非常欢迎。至于防止页面跳转到锚点的能力，没有真正干净的解决方案；使用链接和URL片段/哈希是可能的，但很混乱。典型的复选框黑客将rk，但需要添加无关的html。

<script>
function myFunction() {
    var x = document.getElementById("video");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
</script>

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(); });