javascript / css:更改显示属性

时间:2013-09-20 11:34:38

标签: javascript css

我想在没有documentGetElementById的情况下更改显示,但是以下内容不起作用。 HTML

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a><div id="showfaq1" style="display:none;">Open Box.  Remove device. </div>

的javascript:

function toggleFaq(faqid) {
//alert(faqid);
var divname = "showfaq"+faqid;
//alert(divname);
divname.style.display="block";
}

谁能告诉我我做错了什么?

谢谢。

3 个答案:

答案 0 :(得分:2)

我无法理解为什么你不想使用getElementById,而是......

如果您按此顺序拥有元素

<a href="javascript:void();" onclick="toggleFaq('1')">Instructions</a>
<div id="showfaq1" style="display:none;">Open Box.  Remove device. </div>
<a href="javascript:void();" onclick="toggleFaq('2')">Instructions</a>
<div id="showfaq2" style="display:none;">Open Box.  Remove device. </div>
...
<a href="javascript:void();" onclick="toggleFaq('N')">Instructions</a>
<div id="showfaqN" style="display:none;">Open Box.  Remove device. </div>

您可以使用

<a href="javascript:void();" onclick="toggleFaq(this)">Instructions</a>

function toggleFaq(obj) {
   obj.nextElementSibling.style.display = 'block';
}

答案 1 :(得分:1)

在您的代码divname中是一个包含字符串“showfaq1”的变量,该字符串没有style属性。

要更改元素的样式,您需要使用document.getElementById(divname)获取对该元素的引用:

function toggleFaq(faqid) {
    //alert(faqid);
    var divname = "showfaq"+faqid;
    //alert(divname);
    document.getElementById(divname).style.display="block";
}

如果你对document.getElementById过敏,你可以使用document.querySelector('[id="' + divname +'"]');,但它的支持不如前者好,而且速度较慢。

答案 2 :(得分:0)

发布单独的答案,因为它对我之前的答案没有影响。但是你可以在没有JS的情况下制作基本机制,然后使用其中一个基于JS的解决方案在需要时在破碎的浏览器中修复它:

<强> HTML

<a href="#showfaq1">Instructions</a>
<div id="showfaq1">Open Box.  Remove device. </div>

<强> CSS

a + div { display:none; }
a:focus + div, a + div:target { display:block; }

DEMO