当用户单击侧导航中的按钮时显示数据 - html
Posted
技术标签:
【中文标题】当用户单击侧导航中的按钮时显示数据 - html【英文标题】：show data when user click on button in side-nave - html 【发布时间】：2021-07-03 03:44:34 【问题描述】：当用户单击侧中殿按钮时如何显示数据，我的 html 中有侧中殿，我希望当用户单击 about 时显示数据
我的代码：
<!-- The sidebar -->
<div class="sidenav">
<br><br><br>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="#about">
<p> hello user.first_name user.last_name </p>
<hr>
<p>
<button style="background-color:#7952b3" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
show data
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<p>Your name is - user.first_name user.last_name</p>
<p>Your email is - user.email</p>
</div>
</div>
</div>
我试过了，但是当我点击中殿侧的 about 时，它不显示我的数据，为什么？
例如，当用户单击“关于”按钮时，它应该显示如何执行此操作
【问题讨论】：
请分享您尝试过的代码 好的，我会编辑帖子 【参考方案1】：试试这个：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The sidebar -->
<div class="sidenav">
<br><br><br>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div id="about" style='display:none;'>
<p> hello user.first_name user.last_name </p>
<hr>
<p>
<button style="background-color:#7952b3" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
show data
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<p>Your name is - user.first_name user.last_name</p>
<p>Your email is - user.email</p>
</div>
</div>
</div>
<script>
$(document).ready(function()
$('.sidenav a').on('click', function()
var x = $(this).attr("href");
$(x).toggle();
)
);
</script>【讨论】：
感谢它完美运行！ ，当用户再次点击关于如何隐藏数据时 将 hide() 更改为 toggle()。这应该工作【参考方案2】：使用 onclick 事件有可能隐藏带有 display:none; 的 css 的另一个字段直到处于活动状态？检查此链接并告诉我它是否解决了您的问题。 https://www.w3schools.com/jsref/event_onclick.asp
【讨论】：
【参考方案3】：您可以使用 javascript 来做到这一点。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction()
var x = document.getElementById("myDIV");
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
</script>
</body>
</html>
【讨论】：
以上是关于当用户单击侧导航中的按钮时显示数据 - html的主要内容，如果未能解决你的问题，请参考以下文章