Javascript 无法在引导选项卡中实现jquery滑块
我对JS非常陌生,所以请尽量详细说明。我正在我的html页面中实现引导选项卡。这里有一个使用jquery ui的滑块。在实现选项卡之前,滑块工作正常。但现在滑块不可见。如果在正确的位置单击,我可以移动它。我现在能看到的是滑块的值,而不是整件事 尝试在单击选项卡后重新加载滑块脚本,但没有帮助。另一件奇怪的事情是,当我现在完全移除选项卡,并尝试使用滑块时,结果仍然是一样的,即,我只看到滑块值,而整个div是不可见的 如有需要,请要求进一步澄清。任何帮助都将不胜感激。提前谢谢 js: 有什么问题吗??这真让我困惑。HTH 基本的Javascript 无法在引导选项卡中实现jquery滑块,javascript,twitter-bootstrap-3,jquery-slider,bootstrap-tabs,Javascript,Twitter Bootstrap 3,Jquery Slider,Bootstrap Tabs,我对JS非常陌生,所以请尽量详细说明。我正在我的html页面中实现引导选项卡。这里有一个使用jquery ui的滑块。在实现选项卡之前,滑块工作正常。但现在滑块不可见。如果在正确的位置单击,我可以移动它。我现在能看到的是滑块的值,而不是整件事 尝试在单击选项卡后重新加载滑块脚本,但没有帮助。另一件奇怪的事情是,当我现在完全移除选项卡,并尝试使用滑块时,结果仍然是一样的,即,我只看到滑块值,而整个div是不可见的 如有需要,请要求进一步澄清。任何帮助都将不胜感激。提前谢谢 js: 有什么问题吗??
<div class="tab-pane active fade in basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly =""/> </p>
</div>
</div>
<div class="tab-pane fade advanced-tab" id="advanced">
testing
</div>
$( "#slider" ).slider({
value:"",
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );
优先事项
测试
$(“#滑块”).滑块({
值:“”,
分:0,,
最高:10,
步骤:1,
幻灯片:功能(事件、用户界面){
$(“#优先级”).val(ui.value);
},
开始:函数(事件,ui){alert(“started”)}
});
$(“#优先级”).val($(“#滑块”).slider(“值”);
请发布您的代码,或者最好提供一个Fiddle添加相关代码@mvuajuaI,我已经更新了我的问题!它正在发挥作用,但我只是好奇它为什么不起作用。请阅读更新的部分和评论。谢谢
<ul class="nav nav-tabs" role="tablist" id="tab_control">
<li class="active"><a href="#basic" id="basic_tab" data-target=".basic-tab" role="tab" data-toggle="tab">Basic</a></li>
<li><a href="#basic" data-target="#basic, #advanced" role="tab" data-toggle="tab">Advanced</a></li>
</ul>
<div class="tab-pane active basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>
</div>
</div>
<div class="tab-pane advanced-tab" id="advanced">
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="/css/jquery-ui.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.min.js"></script>
jquery-ui.min.css : jQuery UI - v1.11.2
jquery.js : jQuery v1.11.1
jquery-ui.min.js : jQuery UI - v1.11.2
<div class="tab-pane active fade in basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly =""/> </p>
</div>
</div>
<div class="tab-pane fade advanced-tab" id="advanced">
testing
</div>
$( "#slider" ).slider({
value:"",
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );