L'utilisation des onglets Jquery ne fonctionne pas correctement

J'ai trois graphiques différents que je veux mettre dans des onglets et les ouvrir lorsqu'ils sont sélectionnés. J'ai utilisé des éléments boostrap pour faire 3 des graphiques. J'ai suivi le site de Jquery et j'ai utilisé cet exemple et cela ne fonctionne pas comme il le devrait. Par exemple, lorsque je clique sur l'onglet 1, je veux que Graph One apparaisse. J'ai posté le code ci-dessous.L'utilisation des onglets Jquery ne fonctionne pas correctement

$(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>

Source

2017-07-19 Alex Philavong

Je crois que la question est la déclaré en outre la bibliothèque jQuery au bas de la page:

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

De plus, vous n'avez pas inclus la bibliothèque 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>

Source

2017-07-19 21:58:40 Ryan

Merci un groupe résolu ce problème !!! la –

Si cette solution vous a aidé, veuillez accepter le upvote. – Ryan

L'utilisation des onglets Jquery ne fonctionne pas correctement

Répondre

Questions connexes