鼠标单击时，隐藏链接并显示

Question

当鼠标单击时，我需要隐藏链接并显示另一个div。

<div class="fetch-from-link">
 <a href="#" class="test" onClick="$(this).parent().hide();">
  Fetch from link
</a>

<div class="hello">Hello world</div>
</div>

我只是使用简单的隐藏方法。 但是，如何在链接隐藏后显示“ hello” div？

Answer 1

由于使用jQuery，因此请绑定事件处理程序，而不要使用丑陋的内联单击处理程序。

您需要hide()当前元素，然后可以使用Class Selector（'.hello'）显示另一个div。

 jQuery(function($) { $('.test').click(function(e) { e.preventDefault(); $(this).hide(); $('.hello').show(); }) }); 

 .hello { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fetch-from-link"> <a href="#" class="test">Fetch from link</a> <div class="hello">Hello world</div> </div> 

---

根据当前的HTML，您可以使用.next()

获取匹配的元素集中每个元素的紧随其后的同级。 如果提供了选择器，则仅当与该选择器匹配时才检索下一个同级。

jQuery(function($) {
   $('.test').click(function(e) {
      e.preventDefault();
       $(this).hide().next().show();
   })
});

Answer 2

您可以使用以下代码：

 $(function() { $('.test').click(function() { $('.test').hide(); $('.hello').show(); }); }) 

 .hello { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fetch-from-link"> <a href="#" class="test">Fetch from link</a> <div class="hello">Hello world</div> </div> 

Answer 3

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fetch-from-link"> <a href="#" class="test" onClick="$(this).parent().hide();$('.hello').show();"> Fetch from link </a> </div> <div class="hello" style="display: none; ">Hello world</div> 

您必须将div移到外面，因为您要隐藏包含“ Hello world”文本的div。

Answer 4

<div class="fetch-from-link">
 <a href="#" class="test" onClick="$(this).hide().siblings('.hello,.second-class,.third-class').show();">
  Fetch from link
</a>

<div class="hello">Hello world</div>
</div>

您正在隐藏包含这两个元素的整个div 。 仅隐藏链接。