Home/ Questions/Q 8241763
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T20:56:16+00:00

I do have a problem with starting idTabs by Sean Catchpole, Chrome loads the

  • 0

I do have a problem with starting idTabs by Sean Catchpole, Chrome loads the modules correctly, and there’s no errors on the console, but the jQuery doesn’t work, the link just takes me to the text that isn’t hid by idTabs – so I assume the javascript or jQuery doesn’t work, but where’s the problem? Here’s the code I have

Head section:

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.min.js"></script>

    <script type="text/javascript"> 
    $("#usual1 ul").idTabs(); 
    </script>

</head>

HTML:

    <div id="usual1" class="usual"> 
  <ul> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
  <div id="tab1">This is tab 1.</div> 
  <div id="tab2">More content in tab 2.</div> 
  <div id="tab3">Tab 3 is always last!</div> 
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can easily test and see if Jquery is working by simple making a $ and press enter in google-chrome-console (or firebug) and that part is working. I downloaded jquery-tabs from http://www.sunsean.com/idTabs/ and included it(the non-min file) in scripts/jquery.idTabs.js

    and using the following code it works:¨

    <!DOCTYPE html>
<body>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.js"></script>


</head>
<body>
 <div class="usual"> 
  <ul class="idTabs" > 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
<div style="display:block;" id="tab1">This is tab 1.</div> 
<div style="display:none;" id="tab2">More content in tab 2.</div> 
<div style="display:none;" id="tab3">Tab 3 is always last!</div> 
</div> 
</body>
</html>

    From what I can see you are writing : $(“#usual1 ul”).idTabs(); but you dont need that,w hat you need is to put id=”idTabs” on the ul element you have your tabs. Then as you have, name your tabs (li elements) with #tab1 and then have ids with the same name in the text.

    So 1 make sure jquery is working using $ in console(or seeing errors of failure to get). 2 remove the code inside the script tag. 3 put the class=”idTabs” in the ul element. 4, have fun.

    Edit: should be class=”idTabs” on the ul(or the div before). Also you problably want to hid your divs by style=”display:none” and they will popup on press.

    • 0