Using Jquery tabs isn't working properly
Question
I have 3 different graphs I want to put in tabs and open when selected upon. I used a boostrap elements to make 3 of the graphs. I followed along the Jquery site and used that example and it isn't working how it should. For Example, when I click Tab 1 I want Graph one to appear. I've posted the code below.
$(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>
1 answers
solution1
0 2017-07-19 21:58:40
I believe the issue is with the additionally declared jQuery library at the bottom of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>
As well, you have not included the jQuery UI library:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery tabs not working properly in Magento
jQuery UI isn't working properly on my webpage
jQuery isn't working properly on my Angular.js site
If statement isn't working properly
ClearInterval isn't working properly
isNaN isn't working properly
addEventListener isn't working properly
Lightbox isn't working properly
Why isn't chrome tabs working?
Bootstrap 4 tabs - Only one isn't working
Related Tags