HTML Jquery tab is not working -
this part of previous question html tabs not working sample
here code :
$("#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 { 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; } { 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 timeframe selected (e.g. beginning actual headcount).</td> </tr> <tr> <td nowrap class='tabvalbus'>**other activity includes transfer in/out , to/from leave</td> </tr> <tr> <td nowrap class='tabvalbus'>***ending headcount costs summation of annualized salary active headcount @ time selected.</td> </tr> <tr> <td nowrap class='tabvalbus'>all costs 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>please check above code , advice . sample data working fine , add more data div tags not working !
the problem table sturcture. have 2 options:
you can choose either of one
and yes not forget @tushar's suggestion remove duplicate jquery.js , jquery-ui.js
Comments
Post a Comment