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

【问题标题】：Multiple jScrollPanes overlapping and preventing access to others多个 jScrollPanes 重叠并阻止其他人访问
【发布时间】：2011-12-18 09:25:32
【问题描述】：

我有一个“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 一起单独隐藏，而不会全部消失？

我们将不胜感激。

【问题讨论】：

你有你使用的javascript，还是你有更多相关的html？如果可以的话可以分享吗？所以我们可以看看出了什么问题？

标签： html web jscrollpane

【解决方案1】：

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

您的正确之处在于它与 html 顺序有关 div 3 是最后一个，如果将其放置在与另一个 div 相同的位置，它将加载到其他对象上方的相同位置。

在 jquery 中，您可以通过以下方式更改 div 或任何 html 元素的 z-index 属性：

$(#div1).css(z-index, 1); // 用于 div

$(.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 等不同点为每个单独的窗格调用隐藏函数，它会影响特定的窗格，具体取决于您调用它的时间。

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

<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 选择器调用显示和隐藏它们。

我们创建了一个整数变量，它会根据点击发生变化，因此当点击带有目标 id 标记的链接或按钮时，我们会检查整数的值，并根据它的值，我们可以显示不同的结果，下次点击该值时会有所不同，因此显示和隐藏不同的对象。

【讨论】：