Question

我遇到了CSS属性问题＆gt; display＆gt; 在我的页面上，我使用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='none'而不是display='hidden'。

Answer 3

正如其他人所说，你可能需要在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 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>

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

5 个答案: