我想向选项卡添加淡出 on my page here ,是否有人可以在 javascript 方面提供帮助?
这是 html:
<ul class="tabs clearfix">
<li class="aboutustab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="maptab"><div class="up"></div>Map</li>
<li class="featurestab"><div class="up"></div>Features</li>
<li class="voucherstab"><div class="up"></div>Offers</li>
</ul>
这是 JavaScript:
$(window).load(function(){
$('.tab:not(.aboutus)').hide();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').hide();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.map').show();
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.vouchers').show();
}
}
});
我有bootstrap.js plugin从这里开始并想使用它,如果有人熟悉它那就是理想的。
Here's how I would like it to work.
更新:这就是我现在所拥有的,但是每个选项卡的淡入淡出效果几乎都不同 - 我喜欢回到“关于我们”选项卡的过渡,它不像其他选项卡的过渡那样“沉重”。优惠选项卡也留下了“功能”选项卡内容的残余内容。
$(window).load(function(){
$('.tab:not(.aboutus)').fadeOut();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').fadeOut();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
newContent.hide();
currentContent.fadeOut(750, function() {
newContent.fadeIn(500);
currentContent.removeClass('current-content');
newContent.addClass('current-content');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.map').fadeIn(500);
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.vouchers').fadeIn(500);
}
}
});
最佳答案
由于您已经在使用 jQuery,所以它非常简单...您无需进行代码操作。 JQuery UI 有选项卡小部件。
http://jqueryui.com/tabs/#default
如果你想在 Ajax 上加载内容 http://jqueryui.com/tabs/#ajax
这里是完整的 API..
http://api.jqueryui.com/tabs/#option-hide
HTML 更改
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>TAB 1</p>
</div>
<div id="tabs-2">
<p>TAB 2</p>
</div>
<div id="tabs-3">
<p>TAB 3</p>
</div>
</div>
更改了 JavaScript
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});
在您的代码中,您可以进行以下更改(假设所有 div 的内容在页面加载时可用)
<div id="tabs">
<ul class="tabs clearfix">
<li class="aboutus tab active" style="border-left:1px solid #ccc;"><div class="up"></div><a href="#about">About</a></li>
<li class="map tab"><div class="up"></div><a href="#map">Map</a></li>
<li class="features tab"><div class="up"></div><a href="#features">Feature</a></li>
<li class="vouchers tab"><div class="up"></div><a href="#offers">Offers</li>
</ul>
<div id="about">
<p>about TAB 1</p>
</div>
<div id="map">
<p>MAP TAB 1</p>
</div>
<div id="features">
<p>features TAB 1</p>
</div>
<div id="offers">
<p>offers TAB 1</p>
</div>
</div>
和java脚本(记住你需要添加jquery和jquery ui js和css)
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});
关于javascript - 向选项卡添加淡出效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16569984/