javascript - Css 属性没有改变(javascript)

Question

我正在尝试编写一段代码，通过单击链接来更改我的网页内容。它隐藏了现在显示的 div 并将其替换为另一个。

html是这样的:

        <ul>
                    <li> <a href="#" id="Overview_button"  >  Overview                          </a> </li>
                    <li> <a href="javascript:changeContent('Backgrounds');">                                Backgrounds</a></li>
                    <li><a href="#" id="Boxes_button">   Boxes</a>                          </li>
                    <li><a href="#" id="Colors" >   Colors</a>                          </li>
                    <li> <a href="#" id="Navigation_button">                                Navigation</a></li>
                    <li> <a href="#" id="Positining_button">                                Positioning</a></li>
                    <li> <a href="#" id="Text_button">  Text</a>                                </li>
                    <li> <a href="#">                               Conclusion </a></li>
                </ul>

现在该函数仅应用于第二个元素，因为这是我正在测试的元素。 id 'Backgrounds' 指的是文本后面的一个 div。

JavaScript 是:

var currentContent = 'Overview';

function changeContent(newContent) {
document.getElementById(currentContent).style.display = "none";
document.getElementByID(newContent).style.display = "block";
currentContent = newContent;
};

它成功地隐藏了旧内容，但没有显示新内容。

Answer 1

document.getElementByID

应该是

document.getElementById

无论如何，您应该在发布此类问题之前检查控制台中的错误。