Hank Hank - 4 months ago 12
jQuery Question

Jquery Tabs Showing As Bullet List

In my web app I am using jquery to generate a tabs area where I can retrieve a list of students. For some reason, the tabs are not showing up and instead it is giving me a bullet list.

I've looked at a couple of the answers for this problem from earlier days and have implemented what was suggested (I think) but still nothing.

It all works on another web app I have running on the same server

<link rel="stylesheet"href="/../../../code.jquery.com/ui/1.11.4/themes/smoothness/jque ry-ui.css">
<script src="/../../../code.jquery.com/jquery-1.10.2.js"></script>
<script src="/../../../code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<style>
#tabs{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #A7C942;
width:600;
color: #FFFFFF;
font-weight: bold;
}
</style>


The HTML for the actual tabs

<div id="tabs" align="center" width="700">
<ul>
<li><a href="listseniors.php">Seniors</a></li>
<li><a href="listjuniors.php">Juniors</a></li>
<li><a href="listsophomores.php">Sophomores</a></li>
<li><a href="listfreshmen.php">Freshmen</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
</div>

<div id="student_data" align="center"></div>


I've compared the code to the other app and it looks identical so I'm at a loss as to what to check next.

Thanks

Answer

Your code works when using this

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

https://jsfiddle.net/66eoc1md/

$(function() {
  $("#tabs").tabs();
});
 #tabs {
   font-size: 14px;
 }
 
 .ui-widget-header {
   background: #b9cd6d;
   border: 1px solid #A7C942;
   width: 600;
   color: #FFFFFF;
   font-weight: bold;
 }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>



<div id="tabs" align="center" width="700">
  <ul>
    <li><a href="listseniors.php">Seniors</a></li>
    <li><a href="listjuniors.php">Juniors</a></li>
    <li><a href="listsophomores.php">Sophomores</a></li>
    <li><a href="listfreshmen.php">Freshmen</a></li>
  </ul>
  <div id="tabs-1">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
  <div id="tabs-4">
  </div>
</div>

<div id="student_data" align="center"></div>

Comments