同じ div で z-index を変更する方法を尋ねる質問を見たことがありますが、これを別の div に適用する方法については知りません。これを行う正確な方法を知るのに十分なJavaScriptの知識はありませんが、可能だと思います。
これは私がやりたいことです:
次のページが進行中です: http://maevamaurel.com/book.html
このページには、メイン メニューと、ユーザーがアーティストの作品を閲覧できるサブ メニューの 2 つのメニューがあります。私がやろうとしているのは、対応するサブメニューボタン (Web/Corporate/ など) が選択されたときに、さまざまなギャラリーで z-index を変更することです。したがって、Web ボタンが選択されると、対応するギャラリーが前面に表示されます。おそらくコーディングするのが最善の方法ではないことはわかっていますが、提案は大歓迎です。
ところでそれはうまくいくでしょうか?すべてのギャラリーが同じ z-index を持っているとは限らないことを知っていると思います (混乱しています。この特定のページでずっと作業してきました。php/sql コンボを実行しますが、ユーザーには管理ページにアクセスする方法の手がかりなので、ftpアクセスしかありません)。
どんな助けでも大歓迎です。
補遺:
これが私が持っているコードです(私はHTMLコードしか持っていません)
<div id="menu_book">
<a href="" id="web">Web</a>
<a href="" id="corporate">Corporate</a>
<a href="" id="print">Print</a>
<a href="" id="perso">Perso</a>
<a href="" id="projetpro">Projet Pro.</a>
</div>
メニューコードです
<div id="tab_web">
<img src="img/Page_Book/images_book/image_web/site_1_preview.png" alt="Test description" data-description="Test description for image 1">
<img src="img/Page_Book/images_book/image_web/site_2_preview.png">
<img src="img/Page_Book/images_book/image_web/site_3_preview.png">
<img src="img/Page_Book/images_book/image_web/site_4_preview.png">
<img src="img/Page_Book/images_book/image_web/site_5_preview.png">
<img src="img/Page_Book/images_book/image_web/site_6_preview.png">
<img src="img/Page_Book/images_book/image_web/site_7_preview.png">
<img src="img/Page_Book/images_book/image_web/site_8_preview.png">
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#tab_web');
</script>
</div>
それがdivコードです(私はGalleriaプラグインを使用しています)
ああ、ギャラリー タブの対応するコードは次のとおりです。
#tab_web {
position:absolute;
display:block;
height:62%;
width:48%;
left:17%;
top:18%;
z-index:400;
}
それらはすべて同じであるため、それぞれのコードを1つだけ配置します。ギャラリー タブの z-index を省略した場合、役に立ちますか? それらは別の div 内にあるため、影響はあまりありません。
更新:動作するようになりました。唯一の問題は、他のギャラリーが z-index 値を保持していることです。今、私はアルゴリズムについて考えてきましたが、これがうまくいくと思います:
- 各 ID に「.Galleria」などのクラスを指定します。
- JavaScript を変更して関数 (id,value) に変換します。
- 関数が呼び出されると、クラス「.Galleria」を持つすべての要素が呼び出され、指定された ID の z-index が選択された値で変更されます。同じクラスに属しているが同じ id ではない他のすべての値の z-index 値は、より低い値に削減されます。
私はこれを行う方法について一般的な考えを持っているので、朝食を食べたら関数を書き込もうとします(空腹時に考えようとしても無駄です)が、いくつかの指針を教えていただければ幸いです。
$(this).elementbyId などに似たものを使用する必要があると思いますか?
JavaScript API のドキュメントを参照する必要があります。
コードの更新
朝食を煮込んで調理している間に、この関数をかなり急いで書きました。それが機能するかどうかはわかりませんが、まだテストしていませんが、男性の修正の前後にあなたの入力を得ると思います(学習時に常に役立ちます)
関数 :
function changeIndex(gallerie,id) {
var elements = document.getElementsByClassName(gallerie),i;
for (i in elements) {
if (elements = id) {
$(elements).css('zIndex',400);
}
else {
$(elements).css('zIndex',200);
}
}
}
そこでうまくいかないことはありますか?