1

我看到一些问题询问如何更改同一 div 上的 z-index，但没有询问如何将其应用于不同的 div。我没有足够的 javascript 知识来知道执行此操作的确切方法，但我认为这是可能的。

这就是我想要做的：

我正在进行以下页面：http: //maevamaurel.com/book.html

这个页面有两个菜单，主菜单和一个允许用户浏览艺术家作品的子菜单。我要做的是让不同的画廊在选择相应的子菜单按钮（Web/Corporate/ 等）时更改 z-index。Thus, when the Web button is selected, the corresponding gallerie is brought up on front. 我知道这可能不是最好的编码方式，但欢迎提出任何建议。

顺便说一句，这行得通吗？我想知道它可能不会一旦所有画廊都具有相同的 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;

}

我只放了其中一个的代码，因为它们都是一样的。如果我省略了画廊选项卡的 z-index 会有帮助吗？它们在另一个 div 中，因此不会对它们产生太大影响。

更新：我让它工作了，唯一的问题是其他画廊保持他们的 z-index 值。现在我一直在思考算法方面的问题，这就是我认为可行的方法：

  1. 我给每个 id 一个类，比如“.Galleria”
  2. 我修改了 javascript 以将其变成一个函数，其中 function(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