-1

主にインバウンドマーケターですが、HTMLとCSSが得意です。私の知識はこの2つを超えることはありません。

現在、事業用のホームページを作成中です。私はこの時点で立ち往生しています。

メインのホームページには、さまざまな利点を表す 6 つのアイコンがあります。

divテキストを変更することによってクリックされたアイコンに応答する、下に別の配置が必要です。

これを行っている Web サイトの最も良い例は、ホームページの Kiss Metricsです。

JS や jQuery を知りません。CSS を使用してこれを行う方法はありますか?

4

4 に答える 4

1

jQueryでこれを行うことができます：

$("#imgDiv1").click(function () {
  $("#textDiv2", "#textDiv3", "#textDiv4", "#textDiv5", "#textDiv6").hide();
  $("#textDiv1").show();
});

コードの説明:各画像 div に対してクリック機能を割り当てて、他のすべての textDiv を非表示にし、目的の div を表示します。

于 2013-02-16T21:42:54.303 に答える
1

実際、これはCSS3のみを使用して可能です。おかげで:target、ターゲット要素 onclick にさまざまなスタイルを適用できます。

ライブ jsFiddle デモ

html:

<div id="icons">
  <a href="#txt1">ICON1</a>
  <a href="#txt2">ICON2</a>
  <a href="#txt3">ICON3</a>
</div>
<div id="text">
  <span id="txt1">Benefit 1</span>
  <span id="txt2">Benefit 2</span>
  <span id="txt3">Benefit 3</span>
</div>

CSS:

#text span {
  display:none;
}
#text span:target {
  display:block;
}

ご注意ください：

  1. #iconsの外側の要素をクリックすると、テキストはすぐに消えます。

  2. jQuery を使用してこの種のタスクを実行することを強くお勧めします。とても簡単です、試してみてください。

于 2013-02-16T21:56:22.123 に答える
0

私はまだ JavaScript の経験が豊富ではありませんが、これは JavaScript を使用することによってのみ達成されると言わざるを得ません。私は Web 開発者の学生であり、経験について言えば、HTML と CSS は構造化/スタイリングに重点を置いていました。

于 2013-02-16T21:42:42.650 に答える
0

JavaScript なし - いいえ。

JavaScript を使用すると、

document.getElementById('elementId').style.display='none'

要素を非表示にする

document.getElementById('elementId').style.display='block'

現れるように。

とにかく、jQuery の方が優れたソリューションです。

于 2013-02-16T21:44:34.540 に答える