当我从ajax.googleapis应用jquery.min.js时，jQuery选项卡没有显示

Question

我对我的标签有一个问题。在包含<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>之前，标签正在显示，但是现在3个表出现了与它们相应的选项卡。

请在下面检查我的代码

在我的头部标签中：

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/userpage.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" media="all" /> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>  
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>  

<script>
$(function() {
    $( "#tabs" ).tabs();
});
</script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript">
        function codeBinsAddEvent(obj,type,fn){
            if(obj.attachEvent){
                    if(type == "load"){
                        obj.attachEvent('on'+type, fn);
                    }
                    else{
                        obj.attachEvent('onreadystatechange', fn);
                    }
                    /*
                obj['e'+type+fn]=fn;
                obj[type+fn]=function(){
                    obj['e'+type+fn](window.event)}
                ;obj.attachEvent('on'+type,obj[type+fn])*/
             }
            else obj.addEventListener(type,fn,false)
        };
        function codeBinsAddLoadEvent(fn){
            codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn)
        };
        function codeBinsAddReadyEvent(fn){
            codeBinsAddEvent(document,'DOMContentLoaded',fn)
        };   
     </script>   

和我的身体标签：

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Students</a></li>
    <li><a href="#tabs-2">Subjects/a></li>
</ul>
<div id="tabs-1">   
<table id="mytable" cellspacing="0" summary="Students">
<tr>
<th scope="col" class="nobg"></th>
<th scope="col" abbr="Name">Name</th>
<th scope="col" abbr="Address">Address</th>
<th scope="col" abbr="Level">Level</th>
<th scope="col" abbr="School">School</th>
</tr>
<?php
// Start looping table row
while ($row = mysql_fetch_array($result)) {
        $firstname = $row["Firstname"];
            $middlename = $row["Middlename"];
            $lastname = $row["Lastname"];
            $address = $row["Address"];
    $level = $row["LevelName"];
    $school = $row["SchoolName"];
?>
<tr>
<td><input name="checkbox" type="checkbox" /></td>
<td class="spec"><?php echo $lastname.", ".$firstname. " " .substr($middlename, 0,1) . "." ; ?>   </td>
<td><?php echo $address; ?></td>
<td><?php echo $level; ?></td>
<td><?php echo $school; ?></td>
</tr>
<?php
// Exit looping 
}
?>
</table>
</div> <!-- end of tabs1 -->
<div id="tabs-2">
<table id="mytable" cellspacing="0" summary="Subjects">
<tr>
<th scope="col" class="nobg"></th>
<th scope="col" abbr="Code">Subject Code</th>
<th scope="col" abbr="Name">Subject Name</th>
<th scope="col" abbr="Description">Description</th>
<th scope="col" abbr="Unit">Unit</th>
</tr>
<?php
$result2 = mysql_query($sql);  
if($result2 === FALSE) {
die(mysql_error()); // TODO: better error handling
} 
// Start looping table row
while ($row2 = mysql_fetch_array($result2)) {
        $code = $row2["Code"];
    $Name = $row2["Name"];
    $description = $row2["Description"];
            $unit = $row2["Unit"];
?>
<tr>
<td><input name="checkbox" type="checkbox"/></td>
<td class="spec"><?php echo $code; ?>    </td>
<td><?php echo $name; ?></td>
<td><?php echo $description; ?></td>
<td><?php echo $unit; ?></td>
</tr>
<?php
// Exit looping
}
?>
</table>
</div> <!-- end of tabs2  -->

当我添加此内容时：

<script type="text/javascript">
        function codeBinsAddEvent(obj,type,fn){
            if(obj.attachEvent){
                    if(type == "load"){
                        obj.attachEvent('on'+type, fn);
                    }
                    else{
                        obj.attachEvent('onreadystatechange', fn);
                    }
                    /*
                obj['e'+type+fn]=fn;
                obj[type+fn]=function(){
                    obj['e'+type+fn](window.event)}
                ;obj.attachEvent('on'+type,obj[type+fn])*/
             }
            else obj.addEventListener(type,fn,false)
        };
        function codeBinsAddLoadEvent(fn){
            codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn)
        };
        function codeBinsAddReadyEvent(fn){
            codeBinsAddEvent(document,'DOMContentLoaded',fn)
        };   
     </script> 

它不允许标签显示。怎么了？请帮助谢谢。

Answer 1

您两次包括jQuery，因此第二个包括jQuery UI选项卡正在删除。

删除此行：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

，如果要包含一个缩小版本，则将第一个URL更改为：

http://code.jquery.com/jquery-1.8.3.min.js

Answer 2

您正在尝试使用多种版本的jQuery，这会导致错误。

如果要使用缩小版本

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js" ></script>