[英]switch between tabs without reloading image
我对JQ / JS函数还是有点陌生,我自己尝试一下...所以,这里的问题是,例如:单击名为“ Tab1”的选项卡,然后打开图像。 之后,如果我再次单击相同的选项卡,图像会向后滑动,这很好。 但我希望由于选项卡“ Tab1”已经打开并在其下加载了图像,因此我立即切换到“ Tab2”,当我这样做时,我将图像加载到“ Tab2”内容下而没有向上滑动或任何滑动,只是看起来像我第一次单击该选项卡,所有“动画”都平滑缓慢地滚动到底部。
jsfiddle中jq函数的JSFIDDLE示例。(3之1)
$(document).ready(function(){
$('#inside1').click(function() {
$("#panel").css('background-image', 'url(http://upload.wikimedia.org/wikipedia/commons/1/1f/Nsr-slika-015.png)');
});
});
ps:出于某种原因,jsfiddle不会按我的意愿加载它,但是您仍然可以在那里看到问题。
尝试
jQuery(function ($) {
var $panel = $("#panel");
var $tabs = $('.tab').click(function () {
var $this = $(this),
isActive = $this.hasClass('active');
if ($panel.is(':visible') && !isActive) {
$panel.css('background-image', 'url(' + $this.data('background') + ')');
$tabs.removeClass('active');
$this.addClass('active');
} else {
if (!isActive) {
$panel.css('background-image', 'url(' + $this.data('background') + ')');
}
$panel.slideToggle();
$this.toggleClass('active');
}
});
})
演示: 小提琴
我会这样:
$(".tab").click(function () {
var id = $(this).attr("id");
id = id.substr(id.length - 1, 1);
if ($(this).hasClass("open")) {
$("#panel").slideUp();
} else {
$(".tab.open").removeClass("open");
if ($("#panel").is(":hidden")) {
$("#panel").slideDown();
}
$("#panel").removeAttr("class");
$("#panel").addClass("panel" + id);
}
$(this).toggleClass("open");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.