0

私は解決策を探しましたが、具体的なものは何も見つかりませんでした。それが非常に実行可能であることはわかっていますが、JavaScript の経験が不足しているため、ここで制限されていると思います。基本的に、5 つの div があり、それぞれがボタンのように機能します。各ボタンに、5 つのボタンとは関係のない別の div を表示するようにします。私はそれらを「Menubox1/2/3/4」と呼び、それぞれがそれぞれにリンクされています。私の最初のアイデアは、すべてのメニューを互いの上に積み重ね、その上に z-index 5 の空白のメニューを配置することでした。

次に、div ボタンで「onclick」メソッドを使用して、それぞれのメニューの要素を取得し、z-index を 6 に増やして、一番上に移動するように指示します。また、他のすべてのメニューを 4 にして残りより下に移動するように指示します。

したがって、効果的に各ボタンは、それに関連付けられたメニューを最も高い z インデックスで一番上に表示し、他のメニュー ボックスを非表示にして、他のボックスが同じレベルにならないようにします。

このJSで動作させる方法を見つけました

//Shows the current menu on top
  function showstuff(boxid) {
            document.getElementById(boxid).style.zIndex="5";
        }
//Hides the rest of them.
        function hidestuff(boxid) {
            document.getElementById(boxid).style.zindex="3";
        }



<div onclick="showstuff('Menu1'); hidestuff('Menu2'); hidestuff('Menu3');" ;style="cursor:pointer;">

そして、それぞれのボックスIDを「onclick」に入れることで、すべて機能しますが、問題は一度しか機能せず、それぞれがクリックされるたびに機能する必要があることです。

誰かがより多くの情報を必要とする場合は、私が提供します。

4

1 に答える 1

1

visibility:hidden/visible非表示/表示したいペインで使用してみませんか？クリックするたびに各ペインでその属性をリセットする必要がありますが、ブラウザがz-indexをレンダリングする方法や、レンダリング中に1つだけの場合に複数のdivレンダリングの奇妙な表示が表示される場合があるかどうかを心配する必要はありません。したほうがいい。

于 2012-09-10T15:09:55.747 に答える