마우스 클릭시 링크를 숨기고 표시

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

다음과 같은 코드를 사용할 수 있습니다

$(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')을 사용해야합니다. 현재 HTML 당으로

---

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>

, 당신은 .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>

당신은 D를 이동해야합니다 당신이 "안녕하세요 세계"텍스트를 포함하는 div를 숨기고 있기 때문에 외부에 iv.

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이 숨어 있습니다. 링크 만 숨기기.