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


i have code set create tabbed menu , shows fine tabbed menu when load website tabs not change when clicked. in "inspect element" says
$( "#tabs" ).tabs(); not function. not know next step fix problem.

<html lang="en"><head> <meta charset="utf-8"> <title>jquery ui tabs - default functionality</title>  <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>     <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> 

use this:

$.noconflict();     jquery(document).ready(function($) {         alert("adsf");         $("#tabs").tabs();     }); 

$.noconflict() solved issue.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -