javascript - $( "#tabs" ).tabs(); is not a function

I have this code set to create a tabbed menu and it shows up fine as a tabbed menu but when I load the website the tabs do not change when clicked. In the "inspect element" it says
$( "#tabs" ).tabs(); is not a function. I do not know my next step to fix the problem.

<html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
 <link rel="stylesheet"    href="//code.jquery/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery/jquery-1.10.2.js"></script>
    <script src="//code.jquery/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
$(function() {
    $( "#tabs" ).tabs();
});
</script>
<style type="text/css"></style></head>
<body>

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Title1</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Title2</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">title3</a></li>
</ul>
<div id="tabs-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: block;">
 <h2>title1</h2>
    <p>paragragh1</p>
</div>
<div id="tabs-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: none;">
<h2>title2</h2>
    <p>pargraph2
</p>
</div>
<div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: none;">
<h2>title3</h2>
    <p>paragraph3</p>
</div>

<html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
 <link rel="stylesheet"    href="//code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery./jquery-1.10.2.js"></script>
    <script src="//code.jquery./ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
$(function() {
    $( "#tabs" ).tabs();
});
</script>
<style type="text/css"></style></head>
<body>

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Title1</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Title2</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">title3</a></li>
</ul>
<div id="tabs-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: block;">
 <h2>title1</h2>
    <p>paragragh1</p>
</div>
<div id="tabs-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: none;">
<h2>title2</h2>
    <p>pargraph2
</p>
</div>
<div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: none;">
<h2>title3</h2>
    <p>paragraph3</p>
</div>

Share Improve this question asked Apr 24, 2015 at 23:44 magard 311 silver badge2 bronze badges

you should to initialize tab on document ready state – Manish Shukla Commented Apr 24, 2015 at 23:47
5 No error here. jsbin./kusisu/1/edit?html,js,console,output – colecmc Commented Apr 24, 2015 at 23:47
@ManishShukla OP is doing that using $(function(){... which is shorthand for $(document).ready(){ – charlietfl Commented Apr 24, 2015 at 23:48
@colecmc I see your link says it is working. It is for the website morgangardner./resume.html can you check this out and let me know? – magard Commented Apr 26, 2015 at 20:53
I see a lot of issues in your source. Your head and body tags repeat several times and as far as I can tell, jquery is loaded out of order. In other words, jQueryUI loads before jQuery and this is resulting in several errors. – colecmc Commented Apr 27, 2015 at 0:53

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

Use this:

$.noConflict();
    jQuery(document).ready(function($) {
        alert("adsf");
        $("#tabs").tabs();
    });

$.noConflict() is solved my issue.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - $( "#tabs" ).tabs(); is not a function - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)