显示/隐藏 div 点击链接 jquery答案

【问题标题】：Show/hide div click on link jquery显示/隐藏 div 点击链接 jquery
【发布时间】：2019-01-09 00:32:58
【问题描述】：

我正在完成一个网页，这个：https://www.landingpagedude.ca/automate

我想知道如何让用户点击“演讲者”部分中的“点击此处”链接：

第二部分显示在第一部分的下方，也称为“扬声器”，位于首先显示的部分上方：

因此，以防第二部分“演讲者”被隐藏。点击“返回演讲者”链接将返回到第一部分“演讲者”

【问题讨论】：

标签： jquery html css

【解决方案1】：

所以我对您的页面进行了一些处理，并且在其中使用 jQuery 使这些更改对我的会话来说变得轻而易举。我只是打开控制台并输入了两行：

$("#speakers-info ul a").on("click", function(){ 
  $("#speakers-info").hide(); 
  $("#speakers").show();
}); /* It was a one-liner, as shown below */

$("#speakers ul a").on("click", function(){ $("#speakers").hide(); $("#speakers-info").show(); })

第一个采用“返回演讲者”链接，并使用该链接隐藏当前 div 并显示演讲者 div。第二个反转操作。为了您自己的使用，只需将这两行放在您的 custom.js 文件中，几乎可以放在任何地方。

当然，您可能希望默认隐藏#speakers-info。

【讨论】：

完美！这就是我一直在寻找的。非常感谢你！

【解决方案2】：

查看此link 以使用任何属性作为aria-selected 更改true/false 以显示当前元素详细信息

【讨论】：

【解决方案3】：

您可以使用.click(...) 或.on("click", ...)、.hide() 和.show() 来完成这项工作。这是您需要的代码。

$("#speakers-info").hide();
$(".expand-content-link").click(function() {
  $("#speakers").hide();
  $("#speakers-info").show();
});
$(".txtAlg-speakerInfo span a").click(function() {
  $("#speakers-info").hide();
  $("#speakers").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="speakers">
List of Speakers.
<a href="#" class="expand-content-link">Click Here</a>
</div>
<div id="speakers-info" style="display:none;">
Speaker Info.
<li class="txtAlg-speakerInfo span a"><span><a href="#">Back to Speakers</a></span></li>
</div>

【讨论】：