マウスクリックでリンクを非表示にして表示

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> 

単純な隠蔽方法を使用しています。しかし、リンクの後に私の "こんにちは" divを表示するにはどうすればいいですか？

Answer 1

次のコードを使用することができます：あなたはDを移動する必要があります

$(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を表示する必要があります。現在のHTMLを1として

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>

をあなたがあなたの "Hello world"テキストを含む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全体を隠しています。リンクを非表示にする。