HTML вкладка Jquery не работает

Вот мой код:

$("#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, которые он не работает!

источник

2015-06-04 ajay

Если это часть кода для вашего предыдущего вопроса, пожалуйста, добавьте его в этот вопрос и удалить этот. Вы можете отредактировать вопрос столько раз, сколько вам нужно. –

Проблема с вашим table sturcture. Так у вас есть два варианта:

Либо создать в каждом div отдельный table и удалить основную table как в этом DEMO или

Снимите div и держать целевые идентификаторы для каждого tr с, как в этом DEMO

Вы можете выбрать любой из одного

да и не забыть @ предложение Tushar, чтобы удалить дубликаты jquery.js и jquery-ui.js

источник

2015-06-04 05:40:38

Вы включили 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 -->

источник

2015-06-04 05:20:34 Tushar

no Luck @Tushar – ajay

добавляет в div, вызывающий эту проблему ?? – ajay

HTML вкладка Jquery не работает

ответ

Смежные вопросы