gpt4 book ai didi

javascript - 单击导航栏元素时显示隐藏的 div 元素

转载 作者:行者123 更新时间:2023-11-28 19:20:24 26 4
gpt4 key购买 nike

<分区>

我在 bootstrap 中有 3 列 div,我可以使用 - 关闭任何 div

<a href="#card1" class="close" data-dismiss="alert" aria-label="close" id="hide">&times;</a>

现在我有一个侧面导航栏,其中包含显示在页面主体上的 div 的标题,我想要这样的功能,即单击导航栏元素时,相应的 div 元素将从隐藏状态重新出现。

我尝试了以下方式-

function toggleVisibility(id) {

var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "inline";
} else {
x.style.display = "none";
}
}

但不幸的是,它甚至没有被调用——这就是为什么我不知道如何在导航栏上运行自定义 onclick 命令的原因 <a> anchor 标签..

我的 sidenav 看起来像-

  <div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a class="active" href="#home">Overview</a>
<span onclick="toggleVisibility('card1')">Card1</span>
<a href="#" onclick="toggleVisibility('card2')">Card2</a>
<a href="#" onclick="toggleVisibility('card3')">Card3</a>
</div>

您可以看到我使用了一个 span 和 2 个来确定哪个有效——但实际上没有一个有效。当 span 位于页面正文中时,它工作正常,但在导航栏菜单项中,自定义操作不起作用。

这是帮助的 jsfiddle- https://jsfiddle.net/upyxn7wj/1/那么如何通过导航菜单项单击显示隐藏的 div-

注意:我正在使用 Rails,这是为了渲染 View 我已经尝试过 showdev 在评论中给出的 jsfiddle - 但它不起作用

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com