![](/img/trans.png)
[英]jQuery UI Tabs Ajax - only first tab displaying loaded content
[英]JQuery tabs displaying previous tab content
当我单击选项卡2时,它与选项卡1一起显示内容。我尝试使用prev()隐藏前一个元素。 但是它隐藏了整个选项卡菜单,并且活动选项卡没有更改颜色。 我已经在https://jsfiddle.net/nn9bqpsn/1/下附加了jsfiddle链接
<div class="Tabs">
<ul>
<li id="tab1" class="Active">Tab 1</li>
<li id="tab2">Tab 2</li>
<li id="tab3">Tab 3</li>
</ul>
</div>
<div id="tab1-content" class="Tab" style="display:none">
<p>Tab 1 Content</p>
</div>
<div id="tab2-content" class="Tab" style="display:none">
<p>Tab 2 Content</p>
</div>
<div id="tab3-content" class="Tab" style="display:none">
<p>Tab 3 Content</p>
</div>
<script>
$(document).ready(function () {
if ($('li #tab1 .active')) {
$('#tab1-content').show();
}
});
$('#tab1').click(function () {
$('#tab1-content').prev().hide();
$('#tab1-content').show();
});
$('#tab2').click(function () {
$('#tab2-content').prev().hide();
$('#tab2-content').show();
});
$('#tab3').click(function () {
$('#tab3-content').prev().hide();
$('#tab3-content').show();
});
</script>
我也尝试过使用带有href的锚标记,但仍然无法正常工作。 使用href https://jsfiddle.net/cL42g4sb/附在jsfiddle下面的选项卡
这是我采用较长路径的千个解决方案之一,但希望它能更好地说明功能。
工作jsFiddle: 小提琴
$(document).ready(function () {
//Hide all Tabs on laod
$('.Tab').hide();
//Check which tab is active
var activeOnLoad = $('.Tabs ul li.Active').attr("id");
$('#'+activeOnLoad+'-content').show();
//Handle click event
$('.Tabs ul li').on('click', function(e){
e.preventDefault();
//Save clicked element to variable
var clickedTab = $(this).attr("id");
//Remove class from old tab
$(this).parent().find('.Active').removeClass('Active');
//Add Active class to clicked tab
$(this).addClass('Active');
//Hide all Tab elements
$('.Tab').hide();
//Show clicked Tab
$('#'+clickedTab+'-content').show();
});
});
更新OP的新代码:
$(document).ready(function () {
//Hide all Tabs on laod
$('.Tab').hide();
//Check which tab is active
var activeOnLoad = $('.Tabs ul li a.Active').attr("href");
$(activeOnLoad).show();
//Handle click event
$('.Tabs ul li a').on('click', function(e){
e.preventDefault();
//Save clicked element to variable
var clickedTab = $(this).attr("href");
//Remove class from old tab
$(this).parents('ul').find('.Active').removeClass('Active');
//Add Active class to clicked tab
$(this).addClass('Active');
//Hide all Tab elements
$('.Tab').hide();
//Show clicked Tab
$(clickedTab).show();
});
});
jsFiddle: jsFiddle
您可以使用“ TAB”类隐藏元素,然后显示“ propper”选项卡
...
$('#tab1').click(function () {
$('.Tab').hide();
$('#tab1-content').show();
});
$('#tab2').click(function () {
$('.Tab').hide();
$('#tab2-content').show();
});
$('#tab3').click(function () {
$('.Tab').hide();
$('#tab3-content').show();
});
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.