我的jquery不起作用

时间:2012-01-19 12:29:37

标签: jquery html

我正在创建一个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>

我不知道是什么问题。有谁知道解决方案?

2 个答案:

答案 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插件