<p>さまざまなリンクのオーバーレイを表示したいと考えています。最初のオーバーレイには画像とテキストが含まれていますが、リンク 2 をクリックすると、同じ構造で異なるコンテンツを持つオーバーレイ 2 が表示されます。希望の出力を得るのを手伝ってください。 </p>
<p>
<pre class="brush:js;toolbar:false;">function on() {
document.getElementById("オーバーレイ").style.display = "ブロック";
}
関数 on1() {
document.getElementById("overlay1").style.display = "ブロック";
}
関数オフ() {
document.getElementById("オーバーレイ").style.display = "なし";
}</pre>
<pre class="ブラシ:css;ツールバー:false;">.img {
トランジション: トランスフォーム 5 秒のイーズインアウト。
変換: スケール(1);
変換元: 0 0;
}
.img:ホバー {
変換: スケール(1.25)
}
＃かぶせる、
#オーバーレイ1 {
位置: 固定;
表示: なし。
幅: 100%;
高さ: 100%;
トップ: 0;
左: 0;
右: 0;
下: 0;
背景色: 白;
z インデックス: 77777772;
カーソル: ポインタ;
}
＃文章、
＃テキスト 1 {
位置: 固定;
トップ: 20%;
左: 5%。
//フォントサイズ: 50px;
色: 黒;
// 変換:translate(-50%,-50%);
// -ms-transform:translate(-50%,-50%);
}</pre>
<pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()">
<div id="テキスト">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
渓谷に住む人々の計り知れない才能を発見するのに協力してください。 </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
「＞
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
AAA
<h4>MMM</h4>
<p style="font-size:14px;">渓谷に住む人々の計り知れない才能を発見するのに協力してください。 </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
「＞
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">続きを読む -></a>
<a onclick="on(id)"style="font-size: 11pt;">続きを読む -></a>
1. 項目をリストします</pre>
</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これを実現するにはもっと良い方法がありますが、要件に応じて、次のように、異なる
idsとactionsをparamsとして同じ 1 つの関数に渡すことができます。これ＃＃＃