html 在一个页面中更改所有div内容的导航栏

yqyhoc1h 于 2023-05-15 发布在其他

关注(0)|答案(2)|浏览(126)

所以为了快速和重点，我试图在屏幕左侧创建一个小的垂直菜单，当你点击列表中的一个项目时，它会更改右侧div的所有内容，“内容”部分**但不会更改物理html文件。
以下是我想做的“模拟”：

编辑/更新

好吧，我已经找到了一个有效的解决方案，但我有两件事我想改变它，我不知道如何。

function toggle_visibility(id) {
                 var e = document.getElementById(id);
                 if(e.style.display == 'block')
                        e.style.display = 'none';
                 else
                        e.style.display = 'block';
            }

我想补充如下：
1.一次只能显示一个
1.一些'幻灯片'动画改变'屏幕'排序
下面是一个关于链接如何工作的示例：

<a onclick="toggle_visibility('2');">Testing</a>

<div style="display:none;" id="2">
testing for page 2
</div>

Html

来源：https://stackoverflow.com/questions/39418339/navbar-that-changes-div-contents-all-in-one-page

2条答案

按热度按时间

zxlwwiss1#

Vanilla JavaScript已经足够好了

document.querySelectorAll('nav a')
  .forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))


function change(n) {
  let panels = document.querySelectorAll('main div')
  panels.forEach(p => p.classList.remove('active'))
  panels[n - 1].classList.add('active')
}

.container {
  display: flex;
}
nav {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
  background-color: seagreen;
  cursor: pointer;
}
nav a {
  padding: 10px;
}
nav a:hover {
  background-color: gold;
  display: block;
}
main div {
  display: none;
  padding: 20px;
}
.active {
  display: block;
}

<div class="container">

  <nav>
    <a data-id="1">Item 1</a>
    <a data-id="2">Item 2</a>
    <a data-id="3">Item 3</a>
  </nav>
  <main>
    <div class="active">Item 1 Content</div>
    <div>Item 2 Content</div>
    <div>Item 3 Content</div>
  </main>

</div>

赞(0）回复(0）举报 2023-05-15

mv1qrgav2#

上面的代码片段就可以了;只是JavaScript需要移到HTML的末尾。这是互联网上最简单和最好的例子，所以让我们看看完整的答案，以保存其他人查看这篇文章的时间。

<html>
<head>

<style>

.container {
  display: flex;
}
nav {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
  background-color: seagreen;
  cursor: pointer;
}
nav a {
  padding: 10px;
}
nav a:hover {
  background-color: gold;
  display: block;
}
main div {
  display: none;
  padding: 20px;
}
.active {
  display: block;
}

</style>
</head>

<body>    
<div class="container">    
  <nav>
    <a data-id="1">Item 1</a>
    <a data-id="2">Item 2</a>
    <a data-id="3">Item 3</a>
  </nav>
  <main>
    <div class="active">Item 1 Content</div>
    <div>Item 2 Content</div>
    <div>Item 3 Content</div>
  </main>

</div>    

 <script type="text/javascript">    
/*jshint esversion: 6 */
document.querySelectorAll('nav a')
.forEach(e => e.addEventListener('click', _ => change(e.dataset.id)));    

function change(n) {
  let panels = document.querySelectorAll('main div');
  panels.forEach(p => p.classList.remove('active'));
  panels[n - 1].classList.add('active');
}    
</script>

</body>
</html>

赞(0）回复(0）举报 2023-05-15

我来回答

html 在一个页面中更改所有div内容的导航栏

2条答案

Vanilla JavaScript已经足够好了

相关问题

热门标签

最新问答