Question

我试图在标签内容中添加范围滑块。当我在第一个标签中放置范围滑块时 - 内容一切正常，但当我尝试在第二个标签内容中添加另一个范围滑块时，此范围滑块无法正常充电。

当range-slider超出tabs-content时，一切正常，但我需要它在里面。任何人都可以帮我解决这个问题吗？

我的代码：

<ul class="tabs" data-tab>
    <li class="tab-title"><a href="#tab1 active">TAB1</a></li>
    <li class="tab-title"><a href="#tab2">TAB2</a></li>
</ul>
<div class="tabs-content">
    <div class="content active" id="tab1">
        <div class="range-slider radius" data-slider="600" data-options="start: 100; end: 1000; step: 100; display_selector:#t1;"> 
            <span class="range-slider-handle"></span> 
            <span class="range-slider-active-segment"></span> 
            <input type="hidden" name="t1" /> 
        </div>                  
    </div>
    <div class="content" id="tab2">
        <div class="range-slider radius" data-slider="1000" data-options="start: 200; end: 2000; step: 200; display_selector:#t2;"> 
            <span class="range-slider-handle"></span> 
            <span class="range-slider-active-segment"></span> 
            <input type="hidden" name="t2" /> 
        </div>
    </div>
</div>

标签和范围滑块代码来自基础zurb文档 - 分开，它们工作正常。

Answer 1

是的，我解决了这个问题。我使用了jqueryui.com/slider/中的滑块而不是基础滑块，一切正常。 Talegna - 我还没有尝试过你的方法 - 下次我会尝试一下。感谢。

Answer 2

尝试使用tab / accordion等作品。

$(document).foundation({
tab/accordion:{callback : function (tab/accordion) {
$(document).foundation('slider', 'reflow');
}}
});

基础5：标签中的范围滑块未正确加载

2 个答案: