我正在学习jQuery。我从我找到的一个教程中制作了一个菜单系统。
这就是代码。
$(function() {
$('div.tab-panel ul.tabs li').on('click', function() { // Clicks on any tab
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
var $panel = $('#'+$(this).attr('rel'));
if($panel.hasClass('active')){
$panel.slideUp(500,function(){
$panel.removeClass('active');
});
} else {
console.log('not active');
if($panel.siblings('.active').length > 0){
$panel.siblings('.active').slideUp(500,function(){
$panel.siblings('.active').removeClass('active',show_panel());
});
} else {
show_panel();
}
function show_panel(){
$panel.slideDown(500,function(){
$panel.addClass('active');
});
}
}
});
});body {
background : #fafafa;
font-family : Helvetica, Arial, sans-serif;
color : #333333;
}
div.tab-panel ul.tabs {
margin : 0;
padding : 0;
}
div.tab-panel ul.tabs li {
list-style-type : none;
display : inline-block;
background : #999999;
margin : 0;
padding : 3px 10px;
border-radius : 4px 4px 0 0;
color : #ffffff;
font-weight : 200;
cursor : pointer;
}
div.tab-panel ul.tabs li:hover {
color : #ffffff;
background : #666666;
}
div.tab-panel ul.tabs li.active {
color : #ffffff;
background : #666666;
}
div.tab-panel div.panel {
display : none;
background : #c9c9c9;
padding : 30px;
border-radius : 0 0 4px 4px;
}
div.tab-panel div.panel.active {
display : block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>tab-panel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="tab-panel">
<ul class="tabs">
<li rel="panel_1">panel 1</li>
<li rel="panel_2">panel 2</li>
<li rel="panel_3">panel 3</li>
<li rel="panel_4">panel 4</li>
</ul>
<div>
<div id="panel_1" class="panel">
content 1<br/>
content 1<br/>
content 1<br/>
content 1<br/>
content 1<br/>
</div>
<div id="panel_2" class="panel">
content 2<br/>
content 2<br/>
content 2<br/>
content 2<br/>
content 2<br/>
</div>
<div id="panel_3" class="panel">
content 3<br/>
content 3<br/>
content 3<br/>
content 3<br/>
content 3<br/>
</div>
<div id="panel_4" class="panel">
content 4<br/>
content 4<br/>
content 4<br/>
content 4<br/>
content 4<br/>
</div>
</div>
</div>
</body>
</html>以下是它工作的回复：https://tab-panel--computinginschools.repl.co/
问题是，如果你快速点击一个选项卡，然后点击另一个，两个面板都会打开。我该如何防止这种情况发生？
试试这个。
$(document).ready(function() {
$('li#panel_1').click(function() {
$('.content1').toggle("fast");
$('.content2').hide();
$('.content3').hide();
$('.content4').hide();
});
$('li#panel_2').click(function() {
$('.content2').toggle("fast");
$('.content1').hide();
$('.content3').hide();
$('.content4').hide();
});
$('li#panel_3').click(function() {
$('.content3').toggle("fast");
$('.content2').hide();
$('.content1').hide();
$('.content4').hide();
});
$('li#panel_4').click(function() {
$('.content4').toggle("fast");
$('.content2').hide();
$('.content3').hide();
$('.content1').hide();
});
});body {
background : #fafafa;
font-family : Helvetica, Arial, sans-serif;
color : #333333;
}
div.tab-panel ul.tabs {
margin : 0;
padding : 0;
}
div.tab-panel ul.tabs li {
list-style-type : none;
display : inline-block;
background : #999999;
margin : 0;
padding : 3px 10px;
border-radius : 4px 4px 0 0;
color : #ffffff;
font-weight : 200;
cursor : pointer;
}
div.tab-panel ul.tabs li:hover {
color : #ffffff;
background : #666666;
}
div.tab-panel ul.tabs li.active {
color : #ffffff;
background : #666666;
}
div.tab-panel div.panel {
display : none;
background : #c9c9c9;
padding : 30px;
border-radius : 0 0 4px 4px;
}
.content1 .conten2 .content3 .content4 {
display:none;
}<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="tab-panel">
<ul class="tabs">
<li id="panel_1">panel 1</li>
<li id="panel_2">panel 2</li>
<li id="panel_3" >panel 3</li>
<li id="panel_4" >panel 4</li>
</ul>
<div>
<div class="content1 panel">
content 1<br/>
content 1<br/>
content 1<br/>
content 1<br/>
content 1<br/>
</div>
<div class="content2 panel">
content 2<br/>
content 2<br/>
content 2<br/>
content 2<br/>
content 2<br/>
</div>
<div class="content3 panel">
content 3<br/>
content 3<br/>
content 3<br/>
content 3<br/>
content 3<br/>
</div>
<div class="content4 panel">
content 4<br/>
content 4<br/>
content 4<br/>
content 4<br/>
content 4<br/>
</div>
</div>
</div>