0

我在为这个 themeroller jquery 插件加载主题的“选项卡”和“手风琴”时遇到问题。似乎正在加载 CSS，但没有加载 JS。我对 JS 及其正确的文件路径进行了三重检查，所以不确定为什么它没有被标记。有什么建议吗？这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

        <!-- LOAD JQUERY THEME CSS -->
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" />

        <style type="text/css">
        ul#icons {margin: 0; padding: 0;}
        ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
        ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>    


    <!-- LOAD JQUERY -->
        <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <!-- LOAD JQUERY THEME JS -->
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>


    <!--INITIALIZE THEME-->
    <script language="text/javascript">
     $(function(){
     // Tabs
        $('#tabs').tabs();

     // Accordion
        $("#accordion").accordion({ header: "h3" });

    });
    </script>




</head>

<body>

    <!-- Tabs -->

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>

        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>


    <!-- Accordian -->

    <div id="accordion">
        <div>

            <h3><a href="#">First</a></h3>
            <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        </div>
        <div>
            <h3><a href="#">Second</a></h3>
            <div>Phasellus mattis tincidunt nibh.</div>
        </div>

        <div>
            <h3><a href="#">Third</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>
    </div>

   <!-- Theme CSS Loads fine -->

    <ul id="icons" class="ui-widget ui-helper-clearfix">
    <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>

    </ul>



    </body>
    </html>
4

1 回答 1

0

您还必须初始化选项卡。主题已加载，一切都在膨胀，但你错过了：

<script type="text/javascript">
    $(document).ready(function(){var $tabs = $('#tabs').tabs();})
</script>

正确示例：http: //jsfiddle.net/RCKND/

于 2011-08-29T06:41:48.830 回答