使用jquery选项卡不能正常工作

我有3个不同的图我想放在选项卡中，并选择时打开。我使用了boostrap元素来制作3个图表。我沿着Jquery网站，并使用该示例，它不应该如何应对。例如，当我单击Tab 1时，我希望图1出现。我已经发布了下面的代码。使用jquery选项卡不能正常工作

$(document).ready(function(){ 
 
     
 
    $('#tabs').tabs(); 
 
     
 
    });

.col-md-1{  padding: 10px; 
 
       border:1px solid white; 
 
     } 
 
#size { padding: 10px; 
 
      border:1px solid white; 
 
      } 
 
#page{padding-bottom: 100px; 
 
     }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>CS2100 Project 3</title> 
 
    
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> 
 

 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
 
    
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    
 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 
 
     
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
 
    
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    
 
    
 

 
    <!-- Bootstrap --> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <link rel="stylesheet" href="project3.css"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
      
 
</head> 
 
    
 
    <body> 
 
     <div id="main"> 
 
    <div id="tabs"> 
 
    <ul> 
 
    <li><a href="#part1">PART 1</a></li> 
 
    <li><a href="#part2">PART 2</a></li> 
 
    <li><a href="#part3">PART 3</a></li> 
 
    </ul> 
 
     
 
     
 
    
 
     <div class="container" id="part1"> 
 
      <h3>PART 1: 7-Day Forecast (HTML)</h3> 
 
     <table class="table table-hover table-bordered text-center"> 
 
      <tbody> 
 
      <tr class="bg-primary text-primary"> 
 
       <th class="text-center">Forecast</th> 
 
       <th class="text-center">Thursday</th> 
 
       <th class="text-center">Friday</th> 
 
       <th class="text-center">Saturday</th> 
 
       <th class="text-center">Sunday</th> 
 
       <th class="text-center">Monday</th> 
 
       <th class="text-center">Tuesday</th> 
 
       <th class="text-center">Wednesday</th> 
 
      </tr> 
 

 
      <tr> 
 
       <td>High</td> 
 
       <td>88</td> 
 
       <td>81</td> 
 
       <td>75</td> 
 
       <td>83</td> 
 
       <td>87</td> 
 
       <td>90</td> 
 
       <td>91</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>Low</td> 
 
       <td>61</td> 
 
       <td>59</td> 
 
       <td>52</td> 
 
       <td>57</td> 
 
       <td>59</td> 
 
       <td>63</td> 
 
       <td>65</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>Precip</td> 
 
       <td>0%</td> 
 
       <td>50%</td> 
 
       <td>40%</td> 
 
       <td>10%</td> 
 
       <td>0%</td> 
 
       <td>0%</td> 
 
       <td>0%</td> 
 
      </tr> 
 

 
      </tbody> 
 
      </table> 
 
     </div> 
 
     
 
     
 
     
 
     <div id="part2"> 
 
     <div class="container" id="page"> 
 
    <h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3> 
 
     
 
      <div class="row bg-primary text-primary"> 
 
       <div class="col-md-1 text-center">Forecast</div> 
 
       <div class="col-md-1 text-center">Thursday</div> 
 
       <div class="col-md-1 text-center">Friday</div> 
 
       <div class="col-md-1 text-center">Saturday</div> 
 
       <div class="col-md-1 text-center">Sunday</div> 
 
       <div class="col-md-1 text-center">Monday</div> 
 
       <div class="col-md-1 text-center">Tuesday</div> 
 
       <div class="col-md-1 text-center">Wednesday</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      
 
      <div class="row bg-info text-info"> 
 
       <div class="col-md-1 text-center">0</div> 
 
       <div class="col-md-1 text-center">88</div> 
 
       <div class="col-md-1 text-center">81</div> 
 
       <div class="col-md-1 text-center">75</div> 
 
       <div class="col-md-1 text-center">83</div> 
 
       <div class="col-md-1 text-center">87</div> 
 
       <div class="col-md-1 text-center">90</div> 
 
       <div class="col-md-1 text-center">91</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      
 
      <div class="row bg-info text-info"> 
 
       <div class="col-md-1 text-center">Low</div> 
 
       <div class="col-md-1 text-center">61</div> 
 
       <div class="col-md-1 text-center">59</div> 
 
       <div class="col-md-1 text-center">52</div> 
 
       <div class="col-md-1 text-center">57</div> 
 
       <div class="col-md-1 text-center">59</div> 
 
       <div class="col-md-1 text-center">63</div> 
 
       <div class="col-md-1 text-center">65</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      
 
      <div class="row bg-info text-info"> 
 
       <div class="col-md-1 text-center">Precip</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-1 text-center">50%</div> 
 
       <div class="col-md-1 text-center">40%</div> 
 
       <div class="col-md-1 text-center">10%</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
      
 
     
 
     
 
<div id="part3"> 
 
<div class="container" id="page"> 
 
    <h3>PART 3: TCP PACKET STRUCTURE</h3> 
 
     
 
    <div class="row bg-primary text-primary"> 
 
    <div class="col-md-1 text-right" id="size">Byte#</div> 
 
    <div class="col-md-3 text-center" id="size">+0</div> 
 
    <div class="col-md-3 text-center" id="size">+1</div> 
 
    <div class="col-md-3 text-center" id="size">+2</div> 
 
    <div class="col-md-2 text-center" id="size">+3</div> 
 
    
 
    </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">0</div> 
 
    <div class="col-md-5 text-center" id="size">Source Port</div> 
 
    <div class="col-md-6 text-center" id="size">Destination Port</div>  
 
    </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">4</div> 
 
    <div class="col-md-11 text-center" id="size">Sequence Number</div> 
 
    </div> 
 
     
 
     <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">8</div> 
 
    <div class="col-md-11 text-center" id="size">ACK Number</div> 
 
     </div> 
 
     
 
     <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">8</div> 
 
    <div class="col-md-1 text-center" id="size">Offset</div> 
 
    <div class="col-md-1 text-center" id="size">Reserved</div> 
 
    <div class="col-md-5 text-center" id="size">Flags</div> 
 
    <div class="col-md-4 text-center" id="size">Window Size</div> 
 
     </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">16</div> 
 
    <div class="col-md-5 text-center" id="size">Checksum</div> 
 
    <div class="col-md-6 text-center" id="size">Urgent Pointer</div> 
 
    </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">20-56</div> 
 
    <div class="col-md-11 text-center" id="size">Options</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div> 
 
    
 

 

 
     
 
    
 

 

 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
     
 

 
    
 
    </body> 
 
</html>

来源

2017-07-19 Alex Philavong

我相信这个问题是与另外在页面的底部宣布jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>

同时，您还没有了jQuery UI库：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

$(document).ready(function(){ 
 
     
 
    $('#tabs').tabs(); 
 
     
 
    });

.col-md-1{  padding: 10px; 
 
       border:1px solid white; 
 
     } 
 
#size { padding: 10px; 
 
      border:1px solid white; 
 
      } 
 
#page{padding-bottom: 100px; 
 
     }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>CS2100 Project 3</title> 
 
    
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> 
 

 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
 
    
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    
 
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 
 
     
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
 
    
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
    <!-- Bootstrap --> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <link rel="stylesheet" href="project3.css"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
      
 
</head> 
 
    
 
    <body> 
 
     <div id="main"> 
 
    <div id="tabs"> 
 
    <ul> 
 
    <li><a href="#part1">PART 1</a></li> 
 
    <li><a href="#part2">PART 2</a></li> 
 
    <li><a href="#part3">PART 3</a></li> 
 
    </ul> 
 
     
 
     
 
    
 
     <div class="container" id="part1"> 
 
      <h3>PART 1: 7-Day Forecast (HTML)</h3> 
 
     <table class="table table-hover table-bordered text-center"> 
 
      <tbody> 
 
      <tr class="bg-primary text-primary"> 
 
       <th class="text-center">Forecast</th> 
 
       <th class="text-center">Thursday</th> 
 
       <th class="text-center">Friday</th> 
 
       <th class="text-center">Saturday</th> 
 
       <th class="text-center">Sunday</th> 
 
       <th class="text-center">Monday</th> 
 
       <th class="text-center">Tuesday</th> 
 
       <th class="text-center">Wednesday</th> 
 
      </tr> 
 

 
      <tr> 
 
       <td>High</td> 
 
       <td>88</td> 
 
       <td>81</td> 
 
       <td>75</td> 
 
       <td>83</td> 
 
       <td>87</td> 
 
       <td>90</td> 
 
       <td>91</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>Low</td> 
 
       <td>61</td> 
 
       <td>59</td> 
 
       <td>52</td> 
 
       <td>57</td> 
 
       <td>59</td> 
 
       <td>63</td> 
 
       <td>65</td> 
 
      </tr> 
 

 
      <tr> 
 
       <td>Precip</td> 
 
       <td>0%</td> 
 
       <td>50%</td> 
 
       <td>40%</td> 
 
       <td>10%</td> 
 
       <td>0%</td> 
 
       <td>0%</td> 
 
       <td>0%</td> 
 
      </tr> 
 

 
      </tbody> 
 
      </table> 
 
     </div> 
 
     
 
     
 
     
 
     <div id="part2"> 
 
     <div class="container" id="page"> 
 
    <h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3> 
 
     
 
      <div class="row bg-primary text-primary"> 
 
       <div class="col-md-1 text-center">Forecast</div> 
 
       <div class="col-md-1 text-center">Thursday</div> 
 
       <div class="col-md-1 text-center">Friday</div> 
 
       <div class="col-md-1 text-center">Saturday</div> 
 
       <div class="col-md-1 text-center">Sunday</div> 
 
       <div class="col-md-1 text-center">Monday</div> 
 
       <div class="col-md-1 text-center">Tuesday</div> 
 
       <div class="col-md-1 text-center">Wednesday</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      
 
      <div class="row bg-info text-info"> 
 
       <div class="col-md-1 text-center">0</div> 
 
       <div class="col-md-1 text-center">88</div> 
 
       <div class="col-md-1 text-center">81</div> 
 
       <div class="col-md-1 text-center">75</div> 
 
       <div class="col-md-1 text-center">83</div> 
 
       <div class="col-md-1 text-center">87</div> 
 
       <div class="col-md-1 text-center">90</div> 
 
       <div class="col-md-1 text-center">91</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      
 
      <div class="row bg-info text-info"> 
 
       <div class="col-md-1 text-center">Low</div> 
 
       <div class="col-md-1 text-center">61</div> 
 
       <div class="col-md-1 text-center">59</div> 
 
       <div class="col-md-1 text-center">52</div> 
 
       <div class="col-md-1 text-center">57</div> 
 
       <div class="col-md-1 text-center">59</div> 
 
       <div class="col-md-1 text-center">63</div> 
 
       <div class="col-md-1 text-center">65</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      
 
      <div class="row bg-info text-info"> 
 
       <div class="col-md-1 text-center">Precip</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-1 text-center">50%</div> 
 
       <div class="col-md-1 text-center">40%</div> 
 
       <div class="col-md-1 text-center">10%</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-1 text-center">0%</div> 
 
       <div class="col-md-4 text-center" id="color"></div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
      
 
     
 
     
 
<div id="part3"> 
 
<div class="container" id="page"> 
 
    <h3>PART 3: TCP PACKET STRUCTURE</h3> 
 
     
 
    <div class="row bg-primary text-primary"> 
 
    <div class="col-md-1 text-right" id="size">Byte#</div> 
 
    <div class="col-md-3 text-center" id="size">+0</div> 
 
    <div class="col-md-3 text-center" id="size">+1</div> 
 
    <div class="col-md-3 text-center" id="size">+2</div> 
 
    <div class="col-md-2 text-center" id="size">+3</div> 
 
    
 
    </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">0</div> 
 
    <div class="col-md-5 text-center" id="size">Source Port</div> 
 
    <div class="col-md-6 text-center" id="size">Destination Port</div>  
 
    </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">4</div> 
 
    <div class="col-md-11 text-center" id="size">Sequence Number</div> 
 
    </div> 
 
     
 
     <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">8</div> 
 
    <div class="col-md-11 text-center" id="size">ACK Number</div> 
 
     </div> 
 
     
 
     <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">8</div> 
 
    <div class="col-md-1 text-center" id="size">Offset</div> 
 
    <div class="col-md-1 text-center" id="size">Reserved</div> 
 
    <div class="col-md-5 text-center" id="size">Flags</div> 
 
    <div class="col-md-4 text-center" id="size">Window Size</div> 
 
     </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">16</div> 
 
    <div class="col-md-5 text-center" id="size">Checksum</div> 
 
    <div class="col-md-6 text-center" id="size">Urgent Pointer</div> 
 
    </div> 
 
     
 
    <div class="row bg-info text-info"> 
 
    <div class="col-md-1 text-right" id="size">20-56</div> 
 
    <div class="col-md-11 text-center" id="size">Options</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div> 
 
    
 

 

 
     
 
    
 

 

 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 

 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="js/bootstrap.min.js"></script> 
 

 
    </body> 
 
</html>

来源

2017-07-19 21:58:40 Ryan

谢谢一堆，这解决了问题！ –

如果此解决方案有帮助，请接受＆upvote。 – Ryan

使用jquery选项卡不能正常工作

回答

相关问题