CSS 属性“显示”无法正常工作

Question

我的 CSS 属性有问题 >display> 在我的页面上，我使用 display=none 属性隐藏了 4 个 div 元素 现在使用 javascript 我想分别显示每个属性 我能够隐藏元素并能够让它们在点击时出现，但它永远不会像它全部内联并且格式错误时那样显示 我使用了很多值进行显示，例如：内联、块等，但我仍然无法正确处理 如果有人可以帮助我，我将不胜感激 我使用的代码是：

<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>

我看到结果的页面是：

http://theinformant.to/food-drink/

如果您单击名称，例如烹饪、饮料，您会看到在说什么

Answer 1

您的代码非常重复。尝试使其干燥（不要重复自己）。你只需要这个：

function myFunction(id){
  var elements = document.querySelectorAll('.element');
  for(var i=0; i<elements.length; i++){
    elements[i].style.display = elements[i].id == id ? 'block' : 'none';
  }
}

.element{display: none;} #a{display: block;}

<button onclick="myFunction('a')">Show A</button>
<button onclick="myFunction('b')">Show B</button>
<button onclick="myFunction('c')">Show C</button>
<button onclick="myFunction('d')">Show D</button>

<div id="a" class="element">A</div>
<div id="b" class="element">B</div>
<div id="c" class="element">C</div>
<div id="d" class="element">D</div>

Answer 2

正如其他人所说，您可能需要在 display:hidden 和 display:block 之间切换。考虑使用类名而不是直接更新样式。这将使您的代码更易于管理。另外，请参阅@blex 的回答，因为他有一些关于减少代码重复性的好建议。

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

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

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

如果您需要在元素上使用多个类，请尝试使用classList.add('hide') 和classList.remove('hide')。

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

.hide {
  display: none;
}

Answer 3

应该是display='none' 而不是display='hidden'。

Answer 4

建议。我在视图源中看到您使用 jQuery。尝试使用$('#domelementname') 而不是document.getElementById("a")。有更多的重复代码。

Answer 5

<script type = "text/javascript" > document.write('<a style="display:block;width:100%;height:1px;" class="aff-ad-none"></a>');
    window.AFF_ONLOAD = window.AFF_ONLOAD || [];
    window.AFF_ONLOAD.push({
        lkid: "79197967",
        affid: "10207739",
        size: "120*600",
        type: "1",
        uid: "565258",
        language: "sp",
        web_id: "45",
        version: 110
    });
    var aff_s = document.createElement("script"),
        aff_h = document.getElementsByTagName("head")[0];
    aff_s.charset = "utf-8";
    aff_s.async = !0;
    aff_s.src = "https://js.firstgrabber.com/affasi_js.min.js";
    aff_h.insertBefore(aff_s, aff_h.firstChild); 
</script>