jQuery tabs not working

Question

I'm trying to implement jQuery tabs to replace AJAX tab container. I've followed the code from the jquery website but my tabs aren't showing up. It just loads the entire page full of data with no tabs. And firebug tells me the following error:

$("#tabs").tabs is not a function

$("#tabs").tabs();

I've got references to all the files needed:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

And I've got the function specified as follows:

  <script type="text/javascript">
     $(document).ready(function() {
         $("#tabs").tabs();
     });

  </script>

The code for the tabs are as follows:

div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>Patient Information</span></a></li>
        <li><a href="#tab-2"><span>Medical History 1 of 3</span></a></li>
        <li><a href="#tab-3"><span>Medical History 2 of 3</span></a></li>
        <li><a href="#tab-4"><span>Medical History 3 of 3</span></a></li>
        <li><a href="#tab-5"><span>Scheduler</span></a></li>
        <li><a href="#tab-6"><span>Care Plan</span></a></li>
    </ul> 
<div id="tab-1">
</div>
**Repeats for all tabs through tab-6**
</div>

Can anyone tell me what I'm doing wrong? Since the .tabs() function isn't working the page is just loading like so -

Answer 1

Your code works just fine. The only thing you're missing is the CSS for the tabs - http://jsfiddle.net/8JX4A/

Answer 2

If you have another jQuery element in the same page maybe you have conflicts. I have the same problem, try with this:

<script type="text/javascript">
jQuery.noConflict();     
$(document).ready(function() {
     $("#tabs").tabs();
 });

Then only change i:; jQuery.noConflict(); i:; jQuery.noConflict(); before each jQuery element.

Answer 3

您需要链接CSS文件： http ： //jsfiddle.net/fJaBa/

Answer 4

$.fn.tabs = function() {
    var selector = this;

    this.each(function() {
        var obj = $(this); 

        $(obj.attr('href')).hide();

        $(obj).click(function() {
            $(selector).removeClass('active');

            $(selector).each(function(i, element) {
                $($(element).attr('href')).hide();
            });

            $(this).addClass('active');

            $($(this).attr('href')).fadeIn();

            return false;
        });
    });

    $(this).show();

    $(this).first().click();
};

Live Demo Here

Answer 5

Try loading scripts in this sequence

<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>

Answer 6

Not a jquery expert but I do know you will need some css to make the tabs work correctly. since they will need to be positioned relative. Also check out this jquery tabs tutorial to compare your code.

Answer 7

Is the 1.8 alias to the jQuery UI lib working? Have you tried using a specific full version, like 1.8.16 instead? Can you look at the page once it's loaded and see if jQuery and/or jQuery UI were actually pulled in successfully?