我正在学习 jquery,我正在尝试制作一个选项卡。 我不明白为什么这不起作用
这里有我的 HTML
<div class="tab-panels">
<ul class="tabs">
<li rel="panel1"class="active">All</li>
<li rel="panel2">Animals</li>
<li rel="panel3">People</li>
<li rel="panel4">Landscape</li>
</ul>
<div id="panel1" class="panel active">
<img src="images/tab1.jpg"/>
<img src="images/tab2.jpg"/>
</div>
<div id="panel2" class="panel">
<img src="images/tab3.jpg"/>
<img src="images/tab4.jpg"/>
</div>
<div id="panel3" class="panel">
<img src="images/tab5.jpg"/>
<img src="images/tab6.jpg"/>
</div>
<div id="panel4" class="panel">
<img src="images/tab7.jpg"/>
<img src="images/tab8.jpg"/>
</div>
</div>
这是我的 jquery
$(function(){
$('.tab-panels .tabs li').on('click', function({
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').show(300, showNextPanel);
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToShow).slideDown(300, function(){
$(this).addClass('active');
});
});
}));
我根据我观看的视频制作了这段代码,对于这个人来说,代码运行得很好,所以我不明白为什么它对我不起作用。
最佳答案
您忘记初始化它
尝试这样
$(function() {
$( ".tab-panels" ).tabs();
});
关于javascript - Jquery 选项卡不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31129494/