1

人々が jQuery を使用して画像を非表示/表示しているという質問をたくさん見ましたが、jQuery をインストールしていないので、Html/css を使用したいですか?

JavaScript を使用せずにボタンをクリックしたときに画像を表示する方法はありますか?

4

5 に答える 5

3

@Gnuey が言ったように、ホストから参照するだけで簡単に jQuery をインストールできます。Google と Microsoft はどちらも jQuery をホストしていますが、ほとんどの人は Google を使用しています。詳細については、彼のコメントを確認することをお勧めします。

実際、@Dipesh Parmarは純粋なcssでこれを機能させることができますが、回避策が必要です：

画像に ID を指定し、ボタンをその ID に移動させます。

<a href="/#revealonclick"><button>Click to reveal image</button></a>
<img alt="" id="revealonclick" src="/image/pic.png">

次に、画像のCSSで：

#revealonclick{
    display: none;
}

#revealonclick:target{
    display: inline;
}

うん。それが可能だ。CSS3は素晴らしいです。

于 2013-03-28T08:31:05.423 に答える
3

checkboxesクリックを切り替えるために使用できます。

HTML

<input type="checkbox" id="toggle">
<label for="toggle">Click me!</label>
<img src="http://image.shutterstock.com/display_pic_with_logo/232318/232318,1264892711,1/stock-photo-sleeping-pug-puppy-45602341.jpg" alt="" />

CSS

img{display:none;}
input[type=checkbox]:checked ~ img {
    display:block;
}

JSFiddle。

于 2013-03-28T08:33:02.733 に答える
0

次のように JavaScript の基本的な形式を使用できます:( jQueryのインストールに真剣に反対している場合)

function toggleImage() {
    var imgId = document.getElementById('image');
    imgId.style.visibility = (imgId.style.visibility === "hidden" || imgId.style.visibility === "") ? "visible" : "hidden";
}

HTML の場所

<img id="image" src="http://i458.photobucket.com/albums/qq305/Ellerwind1982/souleater5.jpg" />
<button id="sth" onclick="javascript: toggleImage();">Hi</button>
于 2013-03-28T08:36:28.933 に答える
0

DOM をクリックするのはブラウザeventであり、これをcss処理できないため、 javascript、jQuery、またはmootoolsなどのスクリプトeventsを使用する必要があります。client-side

于 2013-03-28T08:28:00.377 に答える
0

そのためにjQueryは必要ありません。ライブラリなしで純粋な Javascript を使用するだけです。

いくつかの CSS イベントがあり、最も一般的なのは :hover ですが、あなたの場合は :active が最も近いイベントです。でも。純粋な CSS でこれを行う良い方法はありません。CSSだけでできることのリンクもここにあります：

http://www.ryancollins.me/?p=1041

于 2013-03-28T08:30:24.580 に答える