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>

我只是使用简单的隐藏方法。但我怎样才能展示我的＃34;你好＆＃34;链接隐藏后的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。仅隐藏链接。

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

4 个答案: