Нажимайте мышью, спрячьте ссылку и покажите

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> 

Я просто использую простой hide способ. Но как я могу показать свой «привет» div после скрытия ссылки?

Answer 1

Вы можете использовать следующий код:

$(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 2

Поскольку 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 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>

Вы должны переместить д iv снаружи, потому что вы скрываете div, содержащий ваш текст «Hello world».

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, содержащее оба элемента. Скрыть ссылку.