多个jscrollpane重叠并阻止对其他jscrollpane的访问

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);//fordiv

$(.scroll-pane).css(z-index, 1);//对于类

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

看一下下面关于理解z索引的文章:

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选择器对它们调用show和hide。

我们创建了一个基于点击的整数变量，所以当链接或带有目标id标签的按钮被点击时，我们检查整数的值是什么，根据它的值我们可以显示不同的结果，下一次点击它的值将会不同，因此显示和隐藏不同的对象