显示/隐藏div单击链接jquery

Question

我正在定稿一个网页，https://www.landingpagedude.ca/automate

我想知道如何使用户单击“扬声器”部分中的“单击此处”链接：

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

因此，如果第二部分“扬声器”将被隐藏。点击“返回演讲者”链接将返回到第一部分“演讲者”

Answer 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。

Answer 2

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

Answer 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>