Question

我对jQuery很新，所以我试着按照这个tutorial然后尝试将它调整为我自己的。但我不是很成功。首先，我在同一页面上有更多次相同的滑块。第一个滑块正常工作但另一个滑块不起作用。如果你滚动它只会继续一点，所以你选择背景而不是图片。如果您想在此处更新网站it's 我不知道它是否是一个CSS问题：S

继承html代码：

div id="sliderTab1">                        
        <div class="scroll-pane">
            <div class="scroll-content">
                <?php include("designRetouch.php")?>
            </div>
            <div class="scroll-bar-wrap">
                <div class="scroll-bar"></div>
            </div>
        </div>    
    </div>

还有3次。

继承人滑块滚动条的jQuery以及如何显示滑块

        function sizeScrollbar(){
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );

        scrollbar.find(".ui-slider-handle").css({
            width : handleSize,
            "margin-left":-handleSize/2,
        });
        handleHelper.width("").width(scrollbar.width() - handleSize);
    }

和...

$("#tab1").click(function(){
        $('li[id^="tab"]').removeClass('current');
            $("#tab1").addClass('current');

        $('div[id^="sliderTab"]').hide();
            $('#sliderTab1').slideToggle('slow');
    });

Answer 1

不进行测试，但从类似的经验来看，你需要为每个sliderTab提供一个不同的id，例如

然后你需要运行初始化的jquery函数来运行每一个，例如：

 $("#tab1").click(function(){
    $('li[id^="tab"]').removeClass('current');
        $("#tab1").addClass('current');

    $('div[id^="sliderTab"]').hide();
        $('#sliderTab1').slideToggle('slow');
});

$("#tab1").click(function(){
    $('li[id^="tab"]').removeClass('current');
        $("#tab2").addClass('current');

    $('div[id^="sliderTab"]').hide();
        $('#sliderTab2').slideToggle('slow');
});

等等。至少那是我开始的地方。

Answer 2

通过为每个滑块创建一个页面来解决问题没有发现问题是什么，但它确实有效。

jQuery滑块问题

2 个答案: