我在单击第一个按钮时如何禁用选项卡 3 时遇到问题。当我点击 Activate 2nd tab 时，第二个选项卡将被启用，但第三个选项卡也将被启用；当我点击 Activate 3rd tab 时应该启用它。
我该怎么办？
<div class="tab-wrapper" id="tab-wrapper">
<div class="tab-header">
<ul class="tabs">
<li><a href="#tab1">Step 1</a></li>
<li><a href="#tab2">Step 2</a></li>
<li><a href="#tab3">Step 3</a></li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
this is tab 1
<button id="button2">Activate 2nd tab</button>
</div>
<div id="tab2" class="tab_content">
this is tab 2
<button id="button3">Activate 3rd tab</button>
</div>
<div id="tab3" class="tab_content">
This is tab3
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
var activate = false,
tabLinks = $('.tabs a'),
tabContent = $('.tab_container').children();
tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
$('#tab2').hide();
$('#tab3').hide(); // Hide second tab
tabLinks.bind('click', function(e) {
e.preventDefault();
if(activate === true) { // Only do something if button has been clicked
var target = this.hash,
el = $(this);
tabLinks.filter('.active').removeClass('active');
el.addClass('active');
tabContent.hide(); // Hide all
$(target).show(); // Show selected
}
});
$('#button2').bind('click', function() {
activate = true; // Activate tab functionality
tabLinks.eq(1).trigger('click'); // Trigger a click on the second tab link
});
$('#button3').bind('click', function() {
activate = true; // Activate tab functionality
tabLinks.eq(2).trigger('click'); // Trigger a click on the third tab link
});
});
</script>
</html>
最佳答案
你可以这样做(使用一个数组来知道选项卡是否已经被激活，而不是只有一个 bool 值):
$(function() {
var activate = [true, false, false],
tabLinks = $('.tabs a'),
tabContent = $('.tab_container').children();
tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
$('#tab2').hide(); // Hide second tab
$('#tab3').hide(); // Hide second tab
tabLinks.on('click', function(e) {
e.preventDefault();
var idx = $(this).data('index');
if (activate[idx] === true) { // Only do something if button has been clicked
var target = this.hash,
el = $(this);
tabLinks.filter('.active').removeClass('active');
el.addClass('active');
tabContent.hide(); // Hide all
$(target).show(); // Show selected
}
});
$('button').on('click', function() {
var index = $(this).data('index');
activate[index] = true; // Activate tab functionality
tabLinks.eq(index).trigger('click'); // Trigger a click on the second tab link
});
}); * {
padding: 0;
margin: 0;
}
body {
margin: 30px;
}
.tab-wrapper {
width: 500px;
}
.tabs {
overflow: hidden;
list-style: none;
}
.tabs li {
float: left;
margin-right: 10px;
border: 1px solid #ccc;
border-bottom: 0;
}
.tabs a {
display: block;
padding: 5px;
width: 100px;
}
.tabs a.active {
background: #efefef;
}
.tab_container > div {
padding: 10px;
border: 1px solid #ccc;
}
button {
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="tab-wrapper" id="tab-wrapper">
<div class="tab-header">
<ul class="tabs">
<li><a href="#tab1" data-index="0">step1</a></li>
<li><a href="#tab2" data-index="1">step2</a></li>
<li><a href="#tab3" data-index="2">step3</a></li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
here is the list of the overview
<button data-index="1">Activate 2nd tab</button>
</div>
<div id="tab2" class="tab_content">
here is the list of the overview
<button data-index="2">Activate 3nd tab</button>
</div>
<div id="tab3" class="tab_content">
End
</div>
</div>
</div>
</body>你也可以在 jsfiddle 上找到代码:
关于javascript - jQuery 选项卡 - 启用和禁用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39034550/