无法使jquery tabify插件响应

时间:2013-09-01 09:22:14

标签: javascript jquery css

我正在努力并检查所有内容,但这个tabify不想工作。我检查了一切100次,但仍然找不到错误。这是我的代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="https://jquery-tabify.googlecode.com/files/jquery.tabify-1.4.js"
        type="text/javascript"></script>
        <script>
            $('#menu').tabify();
        </script>
        <style>
            body {
                font: 0.8em Arial, sans-serif;
            }
            #menu {
                padding: 0;
            }
            #menu li {
                display: inline;
            }
            #menu li a {
                background: #ccf;
                padding: 10px;
                float:left;
                border-right: 1px solid #ccf;
                border-bottom: none;
                text-decoration: none;
                color: #000;
                font-weight: bold;
            }
            #menu li.active a {
                background: #eef;
            }
            .content {
                float: left;
                clear: both;
                border: 1px solid #ccf;
                border-top: none;
                border-left: none;
                background: #eef;
                padding: 10px 20px 20px;
                width: 400px;
            }
        </style>
    </head>

    <body>
        <ul id="menu">
            <li class="active"><a href="#contentHome">Home</a>
            </li>
            <li><a href="#contentGuestbook">Guestbook</a>
            </li>
            <li><a href="#contentLinks">Links</a>
            </li>
        </ul>
        <div class="content" id="contentHome">Content for Home</div>
        <div class="content" id="contentGuestbook">My guestbook</div>
        <div class="content" id="contentLinks">Lin</div>
    </body>

</html>

1 个答案:

答案 0 :(得分:1)

将您的代码包裹在$(document).ready()

<script>
  $(function() {
    $('#menu').tabify();
  });
</script>

使用此脚本,您的脚本将在加载所有内容后执行。没有它 - 如果尚未加载#menu,它将不会做任何事情。