我试图让jQuery的标签和点击我想有活动标签,但其他选项卡上的十字图标越来越受到影响,如果我不关闭一个选项卡,请参阅下面我的代码,并请指教我在哪里,我在做错误?
var text = '';
var tab = "";
var flag = 0;
var athis = '';
$(".tablinks").on("click", function() {
var id = $(this).attr('rel');
athis = $(this);
$(this).addClass('active');
if (flag == 0) {
text = $(this).text();
$(this).html('<i class="fas fa-times"></i>');
$('.tabcontent').hide();
$('#' + id).slideDown();
flag = 1;
} else {
athis.html(text);
$('#' + id).slideUp();
flag = 0;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
<button class="tablinks" rel="a">Are you interested</button>
<button class="tablinks" rel="b">Call Us</button>
<button class="tablinks" rel="c">Followus</button>
</div>
<div id="a" class="tabcontent">
<h3>Are you interested</h3>
</div>
<div id="b" class="tabcontent">
<h3>Contact us</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="c" class="tabcontent">
<h3>Follow us</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
一个快速的解决将是这行的事件处理程序的顶部,但我觉得你的代码可以改写,使这种不必要的:
$('.tablinks:has(i)').not(this).click();
var text = '';
var tab = "";
var flag = 0;
var athis = '';
$(".tablinks").on("click", function() {
$('.tablinks:has(i)').not(this).click();
var id = $(this).attr('rel');
athis = $(this);
$(this).addClass('active');
if (flag == 0) {
text = $(this).text();
$(this).html('<i class="fas fa-times"></i>');
$('.tabcontent').hide();
$('#' + id).slideDown();
flag = 1;
} else {
athis.html(text);
$('#' + id).slideUp();
flag = 0;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
<button class="tablinks" rel="a">Are you interested</button>
<button class="tablinks" rel="b">Call Us</button>
<button class="tablinks" rel="c">Followus</button>
</div>
<div id="a" class="tabcontent">
<h3>Are you interested</h3>
</div>
<div id="b" class="tabcontent">
<h3>Contact us</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="c" class="tabcontent">
<h3>Follow us</h3>
<p>Tokyo is the capital of Japan.</p>
</div>