Javascript 使用Jquery选项卡不是'；t工作不正常

我有3个不同的图表，我想放在选项卡上，并打开时选择。我用boostrap元素制作了3张图。我遵循Jquery站点并使用了该示例，但它并没有按应有的方式工作。例如，当我单击选项卡1时，我希望显示图表1。我已经把代码贴在下面了

$（文档）.ready（函数（）{
$（“#tabs”）.tabs（）；
});
.col-md-1{填充：10px；
边框：1px纯白；
}
#大小{填充：10px；
边框：1px纯白；
}
#页面{填充底部：100px；
}

CS2100项目3





第1部分：7天预测（HTML）
预测
星期四
星期五
星期六
星期日
星期一
星期二
星期三
高
88
81
75
83
87
90
91
低
61
59
52
57
59
63
65
Precip
0%
50%
40%
10%
0%
0%
0%
第2部分：7天预测（引导网格）
预测
星期四
星期五
星期六
星期日
星期一
星期二
星期三
0
88
81
75
83
87
90
91
低
61
59
52
57
59
63
65
Precip
0%
50%
40%
10%
0%
0%
0% 
第3部分：TCP数据包结构
字节#
+0
+1
+2
+3
0
源端口
目的港
4.
序列号
8.
确认号
8.
抵消
含蓄的
旗帜
窗口大小
16
校验和
紧急数据指针
20-56
选择权
我认为问题在于页面底部额外声明的jQuery库：

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

.col-md-1{填充：10px；
边框：1px纯白；
}
#大小{填充：10px；
边框：1px纯白；
}
#页面{填充底部：100px；
}

CS2100项目3





第1部分：7天预测（HTML）
预测
星期四
星期五
星期六
星期日
星期一
星期二
星期三
高
88
81
75
83
87
90
91
低
61
59
52
57
59
63
65
Precip
0%
50%
40%
10%
0%
0%
0%
第2部分：7天预测（引导网格）
预测
星期四
星期五
星期六
星期日
星期一
星期二
星期三
0
88
81
75
83
87
90
91
低
61
59
52
57
59
63
65
Precip
0%
50%
40%
10%
0%
0%
0% 
第3部分：TCP数据包结构
字节#
+0
+1
+2
+3
0
源端口
目的港
4.
序列号
8.
确认号
8.
抵消
含蓄的
旗帜
窗口大小
16
校验和
紧急数据指针
20-56
选择权

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