我有3个不同的图表，我想放在标签中，并在选中时打开。我使用了一个boostrap元素制作了3个图表。我沿着Jquery站点跟随并使用了这个例子，它不应该如何工作。例如，当我单击选项卡1时，我想要显示图1。我已经发布了以下代码。
$(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>
答案 0 :(得分：0)
我认为问题在于页面底部另外声明的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>