-1

I am currently working on a web form and my jquery tabs are not showing when i run the page.I included this inside the header:

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    $( "#tabs" ).tabs();
} );
</script>

and this inside the body:

div id="tabs">
  <div id="tabs-1">
    <div id="tabs-1">
      <p>...</p>
    </div>
  </div>

  <div id="tabs-2">
      <p>,,,</p>
  </div>

  <ul>
    <li><a href="#tabs-1">Next</a></li>
    <li><a href="#tabs-2">Next2</a></li>
  </ul>

 </div>
j08691
  • 204,283
  • 31
  • 260
  • 272
ichigo14
  • 63
  • 5

3 Answers3

0

You are missing adding the base jquery-ui theme for your page to have the default styling. Just add the following line.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Your full page would look like this:

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function(){
    $( "#tabs" ).tabs();
} );
</script>

<div id="tabs">
  <div id="tabs-1">
    <div id="tabs-1">
      <p>...</p>
    </div>
  </div>

  <div id="tabs-2">
      <p>,,,</p>
  </div>

  <ul>
    <li><a href="#tabs-1">Next</a></li>
    <li><a href="#tabs-2">Next2</a></li>
  </ul>

 </div>
Victor
  • 194
  • 4
0

You css file isn't pointing to anything. You need to use one of the jQuery UI themes. The snippet below uses a CDN for the jQuery UI Excite Bike theme:

$(document).ready(function(){
    $( "#tabs" ).tabs();
} );
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Next</a></li>
    <li><a href="#tabs-2">Next2</a></li>
  </ul>

  <div id="tabs-1">
    <div>
      <p>Content for tab 1</p>
    </div>
  </div>

  <div id="tabs-2">
      <p>Content for tab 2</p>
  </div>


 </div>
MichaelvE
  • 2,558
  • 2
  • 9
  • 18
0

You have two "tabs-1" IDs. You do not need the second div inside the first div with id of "tabs-1".

Asheesh Banga
  • 21
  • 2