这是我之前提问HTML tabs is not working sample
的一部分这是我的代码：
$("#tabs ").tabs();#nav,
#nav ul {
list-style: none;
margin-left: 20px;
}
#nav li {
list-style: none;
padding-left: 0px;
vertical-align: middle;
}
#nav liaa {
padding-left: 17px;
background: url(iarrow.gif) left top no-repeat;
padding-bottom: .45em;
}
#nav a {
text-decoration: none;
color: #960000;
}
#nav a:hover {
color: #1b53b9;
}
#nav .expandable {
padding-left: 0px;
background-image: none;
}
.reportcont {
position: relative;
left: 2px;
top: 0;
width: 99%;
overflow: scroll;
border: 0px solid #ccc;
}
a {
font-family: Arial, serif;
font-weight: regular;
font-size: 10px;
font-color: #000080;
text-decoration: underline;
}
a:link {
font-color: #000080;
}
a:visited {
color: #B00081;
}
.busHead {
background-color: #D5E5ED;
font-family: Arial;
font-color: #0099CC;
font-size: 8px;
font-weight: bold;
}
.totHead {
position: fixed;
background-color: #ffffff;
font-family: Arial;
font-color: #000080;
font-size: 8px;
font-weight: bold;
}
.colHeadTot {
border: 2px;
font-family: Arial, serif;
font-weight: bold;
font-size: 10px;
color: #000080;
text-align: center;
margin-bottom: 0;
padding-bottom: 0;
background-color: #D5E5ED;
vertical-align: middle;
}
.colHead {
border: solid 1px #eeeeff;
font-family: Arial, serif;
font-weight: bold;
font-size: 12px;
color: #0099CC;
text-align: center;
margin-bottom: 0;
padding-bottom: 0;
background-color: #D5E5ED;
vertical-align: middle;
white-space: nowrap;
}
.tabValBus {
border-left: solid 1px #eeeeff;
border-right: solid 1px #eeeeff;
border-top: solid 1px #eeeeff;
border-bottom: solid 1px #eeeeff;
border-collapse: collapse;
font-family: Arial, serif;
font-weight: regular;
font-size: 11px;
color: #000080;
text-align: left;
margin-bottom: 0;
padding-bottom: 0;
background-color: #ffffff;
vertical-align: middle;
white-space: pre-wrap;
}
.tabVal {
border-left: solid 1px #eeeeff;
border-right: solid 1px #eeeeff;
border-top: solid 1px #eeeeff;
border-bottom: solid 1px #eeeeff;
border-collapse: collapse;
font-family: Arial, serif;
font-weight: regular;
font-size: 10px;
color: #000080;
text-align: right;
margin-bottom: 0;
padding-bottom: 0;
background-color: #ffffff;
vertical-align: middle;
}
.delta {
background-color: #fff;
text-align: center;
font-family: windings;
font-size: 11px;
}
.blue_row {
background-color: #ccf2fc;
color: #002d72;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.table_header {
color: #00bdf2;
text-align: center;
font-size: 12px;
font-weight: bold;
}
.table_headerH {
color: #002d72;
text-align: center;
font-size: 12px;
font-weight: bold;
}
.pageTitle1 {
margin: 0 auto;
/*width: 774px;*/
width: 100%;
}
.pageTitle1 {
padding: 0px 0px 0px 0px;
color: #000066;
font-weight: normal;
font-size: 19px;
}
.pageTitle1 h2 {
color: #000066;
font-size: 1.2em;
padding-left: 2px;
}
.pageContainer1 {
margin: 0 auto;
width: 100%;
/* example: width: 955px; */
margin-top: 0px;
background-color: #f9f9f9;
overflow-y: auto;
}
#filterdiv {
margin-top: 0px;
overflow: auto;
width: 100%;
}
.reportContainer {
position: absolute;
top: 50%;
left: 50%;
}
.img-container {
position: absolute;
top: 50%;
left: 50%;
}
.img-container>img {
margin-top: -50%;
margin-left: -50%;
width: 10px;
height: 15px;
}
.resizedTextbox {
width: 100px;
padding: 1px
}<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>tabs Sample</title>
<script type='text/javascript' src='../js/jquery-1.9.1.js'></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../cssFilterPage/common_fixed.css" />
<link rel="stylesheet" type="text/css" href="../cssFilterPage/top_nav.css" />
<link rel="stylesheet" type="text/css" href="../cssFilterPage/styles09.css">
<link rel="stylesheet" type="text/css" href="../cssFilterPage/colorbox.css" />
<link rel="stylesheet" type="text/css" href="../cssFilterPage/jquery.cluetip.css" />
<!--<link rel="stylesheet" href="../jqtransformplugin/jqtransform.css" type="text/css" media="all" /> -->
<link rel="stylesheet" type="text/css" href="../cssFilterPage/form_controls.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id='childarpt' class='childarpt'>
</br>
<div id="tabs">
<ul>
<li class="active "><a href="#Total "><span>Total</span></a></li>
<li><a href="#NAM "><span>NAM</span></a></li>
<li><a href="#ASIA "><span>ASIA</span></a></li>
<li><a href="#JAPAN "><span>JAPAN</span></a></li>
<li><a href="#LATAM "><span>LATAM</span></a></li>
<li><a href="#EMEA "><span>EMEA</span></a></li>
</ul>
<table id='myTable' border='0'>
<div id="Total " class="tab active ">
<tr>
<th class='colHead'>title</th>
<th class='colHead'></th>
<th class='colHead'>04-30-2015
<br> count</th>
<th class='colHead'>Hires</th>
<th class='colHead'>Vol
<br>Terms</th>
<th class='colHead'>Invol
<br>Terms</th>
<th class='colHead'>**Other
<br> Activity</th>
<th class='colHead'>Delta</th>
<th class='colHead'>***05-21-2015
<br> Actual HC</th>
<th class='colHead'>Prior Week
<br>2015/05/21
<br>Actual HC</th>
<th class='colHead'>Pending
<br> Hires</th>
<th class='colHead'>Future
<br>Terms
<br>(Non-RIF)</th>
<th class='colHead'>Planned
<br> RIFs</th>
<th class='colHead'>**Other CHC
<br> Activity</th>
<th class='colHead'>Net CHC
<br>Impact (thru
<br>2015/05)</th>
<th class='colHead'>CHC
<br>Impact
<br>(thru
<br>2015/05)</th>
<th class='colHead'>Prior Week
<br>(2015/05/21) CHC
<br> Impact</th>
</tr>
</div>
<div id="NAM " class="tab ">
<tr>
<th class='colHead'>Officer Title Detail</th>
<th class='colHead'></th>
<th class='colHead'>04-30-2015
<br> Actual HC</th>
<th class='colHead'>Hires</th>
<th class='colHead'>Vol
<br>Terms</th>
<th class='colHead'>Invol
<br>Terms</th>
<th class='colHead'>**Other
<br> Activity</th>
<th class='colHead'>Delta</th>
<th class='colHead'>***05-21-2015
<br> Actual HC</th>
<th class='colHead'>Prior Week
<br>2015/05/21
<br>Actual HC</th>
<th class='colHead'>Pending
<br> Hires</th>
<th class='colHead'>Future
<br>Terms
<br>(Non-RIF)</th>
<th class='colHead'>Planned
<br> RIFs</th>
<th class='colHead'>**Other CHC
<br> Activity</th>
<th class='colHead'>Net CHC
<br>Impact (thru
<br>2015/05)</th>
<th class='colHead'>CHC
<br>Impact
<br>(thru
<br>2015/05)</th>
<th class='colHead'>Prior Week
<br>(2015/05/21) CHC
<br> Impact</th>
</tr>
</div>
<div id="ASIA " class="tab ">
<div></div>
<tr></tr>
<tr>
<th class='colHead'>Officer Title Detail</th>
<th class='colHead'></th>
<th class='colHead'>04-30-2015
<br> Actual HC</th>
<th class='colHead'>Hires</th>
<th class='colHead'>Vol
<br>Terms</th>
<th class='colHead'>Invol
<br>Terms</th>
<th class='colHead'>**Other
<br> Activity</th>
<th class='colHead'>Delta</th>
<th class='colHead'>***05-21-2015
<br> Actual HC</th>
<th class='colHead'>Prior Week
<br>2015/05/21
<br>Actual HC</th>
<th class='colHead'>Pending
<br> Hires</th>
<th class='colHead'>Future
<br>Terms
<br>(Non-RIF)</th>
<th class='colHead'>Planned
<br> RIFs</th>
<th class='colHead'>**Other CHC
<br> Activity</th>
<th class='colHead'>Net CHC
<br>Impact (thru
<br>2015/05)</th>
<th class='colHead'>CHC
<br>Impact
<br>(thru
<br>2015/05)</th>
<th class='colHead'>Prior Week
<br>(2015/05/21) CHC
<br> Impact</th>
</tr>
</div>
<div id="JAPAN " class="tab ">
<div></div>
<tr></tr>
<tr>
<th class='colHead'>Officer Title Detail</th>
<th class='colHead'></th>
<th class='colHead'>04-30-2015
<br> Actual HC</th>
<th class='colHead'>Hires</th>
<th class='colHead'>Vol
<br>Terms</th>
<th class='colHead'>Invol
<br>Terms</th>
<th class='colHead'>**Other
<br> Activity</th>
<th class='colHead'>Delta</th>
<th class='colHead'>***05-21-2015
<br> Actual HC</th>
<th class='colHead'>Prior Week
<br>2015/05/21
<br>Actual HC</th>
<th class='colHead'>Pending
<br> Hires</th>
<th class='colHead'>Future
<br>Terms
<br>(Non-RIF)</th>
<th class='colHead'>Planned
<br> RIFs</th>
<th class='colHead'>**Other CHC
<br> Activity</th>
<th class='colHead'>Net CHC
<br>Impact (thru
<br>2015/05)</th>
<th class='colHead'>CHC
<br>Impact
<br>(thru
<br>2015/05)</th>
<th class='colHead'>Prior Week
<br>(2015/05/21) CHC
<br> Impact</th>
</tr>
</div>
<div id="LATAM " class="tab ">
<div></div>
<tr></tr>
<tr>
<th class='colHead'>Officer Title Detail</th>
<th class='colHead'></th>
<th class='colHead'>04-30-2015
<br> Actual HC</th>
<th class='colHead'>Hires</th>
<th class='colHead'>Vol
<br>Terms</th>
<th class='colHead'>Invol
<br>Terms</th>
<th class='colHead'>**Other
<br> Activity</th>
<th class='colHead'>Delta</th>
<th class='colHead'>***05-21-2015
<br> Actual HC</th>
<th class='colHead'>Prior Week
<br>2015/05/21
<br>Actual HC</th>
<th class='colHead'>Pending
<br> Hires</th>
<th class='colHead'>Future
<br>Terms
<br>(Non-RIF)</th>
<th class='colHead'>Planned
<br> RIFs</th>
<th class='colHead'>**Other CHC
<br> Activity</th>
<th class='colHead'>Net CHC
<br>Impact (thru
<br>2015/05)</th>
<th class='colHead'>CHC
<br>Impact
<br>(thru
<br>2015/05)</th>
<th class='colHead'>Prior Week
<br>(2015/05/21) CHC
<br> Impact</th>
</tr>
</div>
<div id="EMEA " class="tab ">
<div></div>
<tr></tr>
<tr>
<th class='colHead'>Officer Title Detail</th>
<th class='colHead'></th>
<th class='colHead'>04-30-2015
<br> Actual HC</th>
<th class='colHead'>Hires</th>
<th class='colHead'>Vol
<br>Terms</th>
<th class='colHead'>Invol
<br>Terms</th>
<th class='colHead'>**Other
<br> Activity</th>
<th class='colHead'>Delta</th>
<th class='colHead'>***05-21-2015
<br> Actual HC</th>
<th class='colHead'>Prior Week
<br>2015/05/21
<br>Actual HC</th>
<th class='colHead'>Pending
<br> Hires</th>
<th class='colHead'>Future
<br>Terms
<br>(Non-RIF)</th>
<th class='colHead'>Planned
<br> RIFs</th>
<th class='colHead'>**Other CHC
<br> Activity</th>
<th class='colHead'>Net CHC
<br>Impact (thru
<br>2015/05)</th>
<th class='colHead'>CHC
<br>Impact
<br>(thru
<br>2015/05)</th>
<th class='colHead'>Prior Week
<br>(2015/05/21) CHC
<br> Impact</th>
</tr>
</div>
</table>
</div>
<br>
<br>
<br>
<br>
<table style="width:600px ">
<tr>
<th nowrap class='colHead'>Notes: </th>
</tr>
<tr>
<td nowrap class='tabValBus'>*Promotions based on mobility codes for the timeframe selected (e.g. beginning to actual headcount).</td>
</tr>
<tr>
<td nowrap class='tabValBus'>**Other Activity includes Transfer In/Out and To/From Leave</td>
</tr>
<tr>
<td nowrap class='tabValBus'>***Ending headcount costs is the summation of annualized salary for active headcount at the time selected.</td>
</tr>
<tr>
<td nowrap class='tabValBus'>All costs are in USD 1,000s</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<table style="width:300px ">
<tr>
<th nowrap class='colHead'>Parameter Selections: </th>
<th class='colHead'></th>
</tr>
<tr>
<td nowrap class='tabValBus'>Layout 1:</td>
<td class='tabValBus'>Officer Title Detail</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Layout 2:</td>
<td class='tabValBus'>Job Group</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Mgd Segment:</td>
<td class='tabValBus'>TOP</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Mgd Geography:</td>
<td class='tabValBus'>ALL</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Physical Region:</td>
<td class='tabValBus'>ALL</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Physical Country:</td>
<td class='tabValBus'>ALL</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Officer Title:</td>
<td class='tabValBus'>ALL</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Standard Grade:</td>
<td class='tabValBus'>ALL</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Job Function/Family/Group:</td>
<td class='tabValBus'>ALL</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Layout View:</td>
<td class='tabValBus'>Rows</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Include Committed Headcount:</td>
<td class='tabValBus'>Yes</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Include Costs:</td>
<td class='tabValBus'>No</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Historical Start Date:</td>
<td class='tabValBus'>PME</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Historical End Date:</td>
<td class='tabValBus'>CURRENT</td>
</tr>
<tr>
<td nowrap class='tabValBus'>Future End Date:</td>
<td class='tabValBus'>CURRENT</td>
</tr>
</table>
<br/>
<br/>
<br/>
</div>
</body>
</html>
请检查上述代码和建议。对于示例数据，它工作正常，但是将更多数据添加到它不起作用的div标签中！
答案 0 :(得分：1)
问题在于你的table结构。所以你有两个选择：
您可以选择其中一种
是的，不要忘记@Tushar建议删除重复的jquery.js和jquery-ui.js
答案 1 :(得分：0)
您已在页面上两次jQuery和jQuery-ui。删除一个实例，它将工作。
<script type='text/javascript' src='../js/jquery-1.9.1.js'></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../cssFilterPage/common_fixed.css" />
<link rel="stylesheet" type="text/css" href="../cssFilterPage/top_nav.css" />
<link rel="stylesheet" type="text/css" href="../cssFilterPage/styles09.css">
<link rel="stylesheet" type="text/css" href="../cssFilterPage/colorbox.css" />
<link rel="stylesheet" type="text/css" href="../cssFilterPage/jquery.cluetip.css" />
<!--<link rel="stylesheet" href="../jqtransformplugin/jqtransform.css" type="text/css" media="all" /> -->
<link rel="stylesheet" type="text/css" href="../cssFilterPage/form_controls.css">
<!-- Removed Duplicate Scripts From Here -->