Css 属性不会更改(javascript）

我正在尝试制作一段代码，通过单击链接来更改我的网页内容。它隐藏现在显示的div 并将其替换为另一个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"背景"是指文本后面的div。

javascript是：

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

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