我有 css 选项卡，我试图在单击选项卡时获得淡入效果
我找到了 1 tutorial在网络上对 css 选项卡进行动画处理，但是我不想更改我的 css 等。我复制粘贴了 jquery 代码并进行了必要的更改
这是我迄今为止尝试过的 http://jsfiddle.net/McZV9/8/
问题是，当我重新单击选项卡时，内容消失了。有人可以帮助我吗。
这里是代码
HTML
<!DOCTYPE html>
<ul class="tabs clearfix">
<li><a href="#html" class="current">HTML</a>
</li>
<li><a href="#javascript">JavaScript</a>
</li>
<li><a href="#css">CSS</a>
</li>
</ul>
<div class="content">
<div class="current" id="html">grtgrtgrtg</div>
<div id="javascript">erfefr</div>
<div id="css">
<p>Similar to the the CSS is used to style the tooltip, or info box.</p>
</div>
</div>
Jquery
function resetTabs() {
$(".content > div").hide(); //Hide all content
$(".tabs a").attr("class", ""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf(".")); // For localhost/tabs.html#tab2, myUrlTab = .tab2
var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab
(function () {
$(".content > div").hide(); // Initially hide all content
$(".tabs li:first a").attr("class", "current"); // Activate first tab
$(".content > div:first").fadeIn(); // Show first tab content
$(".tabs a").on("click", function (e) {
e.preventDefault();
if ($(this).attr("id") == "current") { //detection for current tab
return
} else {
resetTabs();
$(this).attr("class", "current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
for (i = 1; i <= $(".tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
$(myUrlTab).fadeIn(); // Show url tab content
}
}
})()
谁能帮帮我。
最佳答案
我已经更新了您的代码，现在它可以完美运行:
(function () {
$(".tabs a").on("click", function(e) {
e.preventDefault();
var hash = $(this).attr('href');
window.location.hash = 'tab-' + hash.replace('#', '');
if ($(this).hasClass("current")) { //detection for current tab
return;
} else {
$(".content > div").hide();
$(".tabs a").removeClass("current");
$(this).addClass("current"); // Activate this
$(hash).fadeIn(); // Show content for current tab
}
});
$(".tabs li:first a").trigger('click'); // Activate first tab
if(window.location.hash != ''){
$('.tabs a[href="'+window.location.hash.replace('tab-', '')+'"]').trigger('click');
}
})();
这是一个更新的示例:http://jsfiddle.net/McZV9/14/
关于jquery - 使用 jquery 对 css 选项卡进行动画处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16638410/