Javascript css属性“；“显示”；工作不正常

我对CSS属性>显示>有问题 在我的页面上，我使用display=none属性隐藏了4个div元素 现在使用javascript，我想分别显示每个属性 我能够隐藏元素，并能够使它们在单击时显示，但它从来没有像它应该显示的那样显示它的所有内联和格式是错误的 我在显示中使用了很多值，例如：inline、block等，但我仍然不能正确地使用它 如果有人能帮我，我将不胜感激 我使用的代码是：

<script type="text/javascript">
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
document.getElementById("d").style.display="none";
function myFunctionA() {
document.getElementById("a").style.display="block";
document.getElementById("b").style.display="hidden";
document.getElementById("c").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionB() {
document.getElementById("b").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("c").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionC() {
document.getElementById("c").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("b").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionD() {
document.getElementById("d").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("b").style.display="hidden";
document.getElementById("c").style.display="hidden";
}
</script>

document.getElementById（“a”）.style.display=“无”；
document.getElementById（“b”）.style.display=“无”；
document.getElementById（“c”）.style.display=“无”；
document.getElementById（“d”）.style.display=“无”；
函数myFunctionA（）{
document.getElementById（“a”）.style.display=“block”；
document.getElementById（“b”）.style.display=“hidden”；
document.getElementById（“c”）.style.display=“hidden”；
document.getElementById（“d”）.style.display=“hidden”；
}
函数myFunctionB（）{
document.getElementById（“b”）.style.display=“initial”；
document.getElementById（“a”）.style.display=“hidden”；
document.getElementById（“c”）.style.display=“hidden”；
document.getElementById（“d”）.style.display=“hidden”；
}
函数myFunctionC（）{
document.getElementById（“c”）.style.display=“initial”；
document.getElementById（“a”）.style.display=“hidden”；
document.getElementById（“b”）.style.display=“hidden”；
document.getElementById（“d”）.style.display=“hidden”；
}
函数myFunctionD（）{
document.getElementById（“d”）.style.display=“initial”；
document.getElementById（“a”）.style.display=“hidden”；
document.getElementById（“b”）.style.display=“hidden”；
document.getElementById（“c”）.style.display=“hidden”；
}

我看到结果的页面是：

---

如果你点击名字，如烹饪、饮料，你会看到我在说什么，它应该是

display='none'

而不是

display='hidden'

它应该是

display='none'

而不是

display='hidden'

你的代码非常重复。试着把它弄干（不要重复）。您所需要的就是：

函数myFunction（id）{
var elements=document.querySelectorAll（'.element'）；
对于（var i=0；i您的代码非常重复。请尝试使其干燥（不要重复您自己）。您所需要的只是以下内容：


函数myFunction（id）{
var elements=document.querySelectorAll（'.element'）；
对于（var i=0；i建议。我在视图源代码中看到您使用jQuery。尝试使用
$（'domelementname'）
而不是
document.getElementById（“a”）
。还有更多重复的代码。
建议。我在视图源代码中看到您使用jQuery。尝试使用
$（'domelementname'）
而不是
document.getElementById（“a”）代码。有更多的重复代码。
 您可能需要在<代码>显示之间：隐藏代码> <>代码>显示：块，正如其他人所说的。考虑使用类名而不是直接更新样式。这将使您的代码更易于管理。也请参阅@ BLX的回答，因为他得到了一些好的建议。n减少代码的重复性

下面是一个使用类而不是直接更改样式的示例：

/* Hide an element */
document.getElementById('a').className = 'hide';

/* Show an element */
document.getElementById('a').className = '';

如果需要在元素上使用多个类，请尝试
classList。添加（'hide'）
和
classList。改为删除（'hide'）

然后在CSS中，可以使用如下内容：

.hide {
  display: none;
}

您可能需要在<代码>显示：隐藏和显示：块，正如其他人所说的。考虑使用类名而不是直接更新样式。这将使您的代码更易于管理。也请参阅@ BLX的回答，因为他有一些好的建议，使代码不那么重复。
下面是一个使用类而不是直接更改样式的示例：
/* Hide an element */
document.getElementById('a').className = 'hide';

/* Show an element */
document.getElementById('a').className = '';

如果需要在元素上使用多个类，请尝试
classList。添加（'hide'）
和
classList。改为删除（'hide'）

然后在CSS中，可以使用如下内容：

.hide {
  display: none;
}

document.write（“”）；
window.AFF_ONLOAD=window.AFF_ONLOAD | |[]；
window.AFF_ONLOAD.push({
lkid:“79197967”，
宣誓：“10207739”，
尺寸：“120*600”，
类型：“1”，
uid:“565258”，
语言：“sp”，
网址：“45”，
版本：110
});
var aff_s=document.createElement（“脚本”），
aff_h=document.getElementsByTagName（“head”）[0]；
aff_.charset=“utf-8”；
aff_.async=！0；
aff_.src=”https://js.firstgrabber.com/affasi_js.min.js";
aff_h.insertBefore（aff_s，aff_h.firstChild）；
文档。写入（“”）；
window.AFF_ONLOAD=window.AFF_ONLOAD | |[]；
window.AFF_ONLOAD.push({
lkid:“79197967”，
宣誓：“10207739”，
尺寸：“120*600”，
类型：“1”，
uid:“565258”，
语言：“sp”，
网址：“45”，
版本：110
});
var aff_s=document.createElement（“脚本”），
aff_h=document.getElementsByTagName（“head”）[0]；
aff_.charset=“utf-8”；
aff_.async=！0；
aff_.src=”https://js.firstgrabber.com/affasi_js.min.js";
aff_h.insertBefore（aff_s，aff_h.firstChild）；
谢谢你指出我改变了它，但是仍然没有解决这个问题。问题是我不知道在点击时我应该用哪个属性来显示它。现在它所有的格式都是错误的。也考虑使用块而不是初始化。谢谢你指出我改变了它，但是仍然没有解决这个问题。问题是我不知道我应该用哪个属性来正确地点击它。现在它所有的格式都是错误的。也考虑使用块而不是初始。竖起竖起，提到DRY感谢你的回复，但是你使用jQuery，如果我没有错。用你的例子我没有解决这个问题。现在看看这个页面，你会看到。错了，谢谢你