Question

我有三个标签，标签内有一个自举滑块。但滑块仅适用于活动选项卡和其他选项卡。如何触发其他选项卡上的滑块？

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
 <div id="home" class="tab-pane fade in active">
  <h3>HOME</h3>
  <div class="text-center well well-lg">
  <input type="text" id="poolSlider" value="8" data-slider-value="8"
  data-slider-min="1" data-slider-max="10" data-slider-step="1" 
  data-slider-orientation="horizontal" data-slider-selection="before"
  data-slider-tooltip="show">
 </div>
</div>

<div id="menu1" class="tab-pane fade">
 <h3>Menu 1</h3>
  <div class="text-center well well-lg">
    <input type="text" id="poolSlider" value="8" data-slider-value="8"
    data-slider-min="1" data-slider-max="10" data-slider-step="1" 
    data-slider
    orientation="horizontal" data-slider-selection="before" 
    data-slider-tooltip="show">
 </div>
</div>

<div id="menu2" class="tab-pane fade">
 <h3>Menu 2</h3>
  <div class="text-center well well-lg">
   <input type="text" id="poolSlider" value="8" data-slider-value="8" 
   data-slider-min="1" data-slider-max="10" data-slider-step="1" 
   data-slider-orientation="horizontal" data-slider-selection="before"
   data-slider-tooltip="show">
  </div>
 </div>
</div>

使用这个小标准脚本代码：

$('#poolSlider').slider({
formatter: function (value) {       
    return 'Current value: ' + value;
}
});

我在小提琴上建立了一个例子：

Fiddle Link

Answer 1

您应该为滑块控件使用单独的ID，并使用类或属性进行选择。

以下情况应该有效。

$('input[type=text]').slider({
formatter: function (value) {       
    return 'Current value: ' + value;
}
});

标签内的Boostrap滑块

1 个答案: