我正在创建一个wordpress网站,其中我有设计标签。 我希望当我点击第一个标签时,它应该显示div的内容id = tab1。
当我点击第二个标签时,它应显示div的强效,id = tab2。
但没有任何效果。
这是我的jquery代码。
$(document).ready(function() {
//Hide all content
$(".tab_content").hide();
//Activate first tab
$(".tabs_links ul li:first").addClass("active").show();
//Show first tab content
$(".tab_content:first").show();
//On Click Event
$(".tabs_links ul li").click(function() {
//Remove any "active" class
$(".tabs_links ul li").removeClass("active");
//Add "active" class to selected tab
$(this).addClass("active");
//Hide all tab content
$(".tab_content").hide();
//Find the rel attribute value to identify the active tab + content
var activeTab = $(this).find("a").attr("href");
//Fade in the active content
$(activeTab).fadeIn();
return false;
});
});
这是我的HTML代码。
<div class="tabs_links">
<ul>
<li><a href="#tab1">News and Events</a></li>
<li><a class="nobg" href="#tab4">Blog</a></li>
</ul>
</div>
<div style="display: none;" id="tab1" class="tab_content">
content of first tab
</div>
<div style="display: none;" id="tab4" class="tab_content">
content of second tab
</div>
我不知道是什么问题。有谁知道解决方案?
答案 0 :(得分:0)
在这里,你需要做一些小css的东西:)使用你的代码的工作测试页面:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.tabs_links ul li{display:inline;}
a{text-decoration:none;color:black;}
.active{background-color:#CECECE;}
.tab_content{margin-left:30px;border:1px dotted black;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tabs_links ul li:first").addClass("active").show();
$(".tab_content:first").show();
$(".tabs_links ul li").click(function() {
$(".tabs_links ul li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
</head>
<body>
<div class="tabs_links">
<ul>
<li><a href="#tab1">News & Events</a></li>
<li><a class="nobg" href="#tab4">Blog</a></li>
</ul>
</div>
<div style="display: none;" id="tab1" class="tab_content">
First First First First First First
</div>
<div style="display: none;" id="tab4" class="tab_content">
Second Second Second Second Second Second
</div>
</body>
</html>
答案 1 :(得分:0)
您的代码运行良好。
我认为问题是你的浏览器或jQuery插件
使用jQuery 1.4.2插件