显示/隐藏div单击链接jquery

时间:2019-01-09 00:32:58

标签: jquery html5 css3

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

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

第二部分显示在第一部分的下方,也称为“扬声器”,显示在第一部分的上方: enter image description here

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

3 个答案:

答案 0 :(得分: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。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

您可以使用.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>