Question

我的html文件如下所示：

<div class="nav">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Work</a>
                </li>
           </ul>
</div>

    <div id="Home">
    <p>My content one</p>
    </div>

<div id="Work">
        <p>My content two</p>
        </div>

我希望我的页面上只显示一个div id。

如果我按下＆＃39; Home＆＃39;，则显示div id：Home。否则，我按下一个工作，显示div id：Work。

我希望此更改是动态的（无需重新加载页面），因为我想添加转换。

Answer 1

就像我在对你的问题的评论中所说，我强烈建议使用类似https://angular.io/guide/quickstart

的内容

但是如果你仍然想要原生解决它，你可以做以下事情：

function changeMenuState(state) {
  for (var i = 0; i < document.getElementsByClassName('content').length; i++) {
    document.getElementsByClassName('content')[i].style.visibility = "hidden"
  }
  document.getElementById(state).style.visibility = "visible"
}

document.getElementById('link1').addEventListener("click", function() {
  changeMenuState('Home')
})
document.getElementById('link2').addEventListener("click", function() {
  changeMenuState('Work')
})

https://jsfiddle.net/xcqe323e/

动态更改显示的HTML div类。

1 个答案: