1

同じ 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 値を保持していることです。今、私はアルゴリズムについて考えてきましたが、これがうまくいくと思います:

  1. 各 ID に「.Galleria」などのクラスを指定します。
  2. JavaScript を変更して関数 (id,value) に変換します。
  3. 関数が呼び出されると、クラス「.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);
        }
    }
}

そこでうまくいかないことはありますか?

4

0 に答える 0