javascript - ワンクリックで画像を非表示/表示

Question

このようなものを作るのを手伝ってくれませんか（javascript、jquery ...）

http://m.uploadedit.com/b016/1370729652780.gif

Nn '1' をクリックすると 'pic1' が表示され、'pic2' が非表示になります。

Answer 1

http://jsfiddle.net/qYCUJ/これを試してください

HTML

<button onclick="showhide_menu('btn1');">Show/Hide.  </button>

<button onclick="showhide_menu('btn2');">Show/Hide.  </button>

<div id="btn1" class="btn" style="display:none;">
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"/>
</div>

<div id="btn2" class="btn" style="display:none;">
<img src="http://jenntgrace.com/wp-content/uploads/2012/12/2.png"/>
</div>

jQueryJS

window.showhide_menu = function(id){
$('.btn:not(#'+id+')').hide();
$("#" + id).toggle();
}

Answer 2

1 つのボタンで 2 つの関数を呼び出すには、ボタン属性を設定してonclick="hideandshow()"から、JavaScript ファイルまたは<script>タグで関数を定義します。

function hide(){
    ... //your code here
}
function show(){
    ... //your code here
}
function hideandshow(){
    hide();
    show();
    return true;
}