Question

请在这里忍受，这可能是一个简单的答案......

我需要使用最简单的css和javascript制作标签式布局部分。

我有一些html div使用css排列在彼此之上，并且最初将它们都设置为'visibility：hidden'。这是html ...

<div id="tabs1" class="hide">
<div id="tabs2" class="hide">
<div id="tabs3" class="hide">

我想要做的是编写一些javascript，以便在点击链接时将一个div的visibility属性更改为“visible”。

相关的CSS只是：

.hide { visibility: hidden; }
.show { visibility: visible; }

以下javascript通过更改类属性 -

，可以从隐藏更改为可见

function showThisTab(id)
{
// show this
document.getElementById(id).className += " show";
}

使用以下html链接通过onclick调用该函数：

<a href="#" onclick="javascript:showThisTab('tabs1')">Tab 1</a>
<a href="#" onclick="javascript:showThisTab('tabs2')">Tab 2</a>
<a href="#" onclick="javascript:showThisTab('tabs3')">Tab 3</a>

以上所有工作都应该如此，但很明显，如果您点击多个链接，所有标签最终会立即显示在彼此之上。因此，我还需要每次都重置所有其他选项卡，只留下用户点击的选项卡。

我将我的js重写为以下内容：

<script type="text/javascript">
/*<![CDATA[*/

function showThisTab(id)
{
var i = 1;

// hide all other tabs:
while(i<10) {
    var divID = 'tabs' + i;
    if (divID !== null) {
    document.getElementById(divID).className += " hide";
    }
    i++;
    }

// show this one
document.getElementById(id).className += " show";
}
/*]]>*/
</script>

这应该遍历标记为tab1到tab10的div，将“hide”附加到类属性（应该正常吗？）。之后，将'show'追加到我想要正常显示的那个。

然而，脚本刚刚破解，谷歌浏览器显示以下错误：“未捕获的TypeError：无法读取属性'className'的null”

当它到达该行时会发生这种情况： document.getElementById（divID）.className + =“hide”;

因此，通过演绎，即使使用if语句，divID在这个阶段仍然显示为null？无论如何我都被困在这里，这令人沮丧，因为我确定我很接近。

任何人都能指出我正确的方向吗？

tl; dr - 上面的代码给出了“Uncaught TypeError：无法读取null的属性'className'”，我不知道为什么。

编辑：@RichieHindle感谢指出这可以解决错误（我被怀疑是愚蠢的）

关于附加类名，我也很愚蠢，工作代码是：

<script type="text/javascript">
/*<![CDATA[*/
function showThisTab(id)
{
var i = 1;
// hide all other tabs:
while(i<10) {
    var divID = 'tabs' + i;
    var div = document.getElementById(divID);
    if (div !== null) {
        div.className = " hide";
    }
    i++;
}
// show this one
document.getElementById(id).className = " show";
}
/*]]>*/
</script>

Answer 1

你的意思是：

var div = document.getElementById(divID);
if (div !== null) {
    div.className += " hide";

你的考试：

if (divID !== null)

即使文档中没有出现div，

也会一直成功。

除非您有至少10个标签，否则当i超过标签数时，您的代码就会中断。

使用javascript更改html元素的css - '未捕获TypeError：无法读取属性'className'为null'

1 个答案: