Question

我有一个“1页”网站，当你点击一个链接时，它会通过jQuery更改内容。

以下是DIV布局的示例：

<div id="div1" class="scroll-pane">
</div>
<div id="div2" class="scroll-pane">
</div>
<div id="div3" class="scroll-pane">
</div>

因此，当您点击一个链接时，例如“div1”将淡出，“div2”（之前隐藏）将淡入其位置。所有DIV都具有相同的CSS位置。我的DIV都有一个jScrollPane，但似乎它们堆叠在一起，div3的窗格始终在其他窗格上绘制。我猜它与它们在HTML中创建的顺序有关吗？ 2的窗格位于1的窗格上方，3的窗格位于2和1的窗格上方。

所以即使div3的所有内容都被隐藏，它的窗格仍然可见，并与下面的其他两个DIV重叠。因此，我只能使用div3的可滚动性，而其他DIV在“下面”并且无法访问。

我可以隐藏JScrollPanes，但我似乎只能同时处理所有这些。如果我告诉jScrollPane隐藏，它们都隐藏了...我尝试更改DIV的zIndex而不是jScrollPane的类，因为它们淡入和淡出，但这并不会改变窗格本身的zIndex。因为我也隐藏了DIV，但窗格仍然落后。

有没有办法单独控制jScrollPanes并使它们的zIndex更改或使它们实际上与它们的DIV一起单独隐藏而不是所有它们都消失了？

非常感谢帮助。

Answer 1

我假设您只想展示一个，并且正在使用jquery。

你的正确之处在于它与html命令div 3的关系最后是如此自然如果放在与另一个div相同的位置它将加载在其他对象上方的同一位置。

在jquery中，您可以通过执行以下操作来更改div或任何html元素的z-index属性：

$(#div1).css(z-index, 1); //对于divs

$(.scroll-pane).css(z-index, 1); //适用于班级

注意＃和之间的区别。用于调用类或id。

查看以下有关理解z-indexing的文章：

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

您隐藏所有JScrollPanes，因为当您执行以下操作时：

$(.scroll-pane).hide();

它将获得所有将.scroll-pane分配给自己的类，这意味着它将在您的示例中获得所有三个。

解决此问题的方法是为每个要单独隐藏的窗格设置一个唯一的类名.scroll-pane-1 .scroll-pane-2，然后使用jquery：

$(.scroll-pane-1).hide();

$(.scroll-pane-2).show();

通过这样做，您可以在不同的点（如onclick，onload）为每个单独的窗格调用hide函数，它将影响特定的一个，具体取决于您何时调用它。

在你的情况下，你可以这样做：

<script>
var index = 0

$('#target').click(function() {

if(index == 0)
    {
        `$(#div1).hide();`
        `$(#div2).show();`
        `$(#div3).hide();`
         index = 1;

    }
if(index == 1)
    {
        `$(#div1).hide();`
        `$(#div2).hide();`
        `$(#div3).show();`
         index = 2;
    }
if(index == 2)
    {
        `$(#div1).show();`
        `$(#div2).hide();`
        `$(#div3).hide();`
         index = 0;
    }

});
</script>

它会产生结果，因为你已经有了唯一的div id，我们可以使用jqueries选择器调用show和hide。

我们创建了一个基于click更改的整数变量，因此当点击带有id标签的链接或按钮时，我们检查整数是什么值，并根据其值我们可以显示不同的结果，下次单击该值时会有所不同，因此会显示和隐藏不同的物体。

多个jScrollPanes重叠并阻止访问其他人

1 个答案: