2015-04-24 3 views
1

У меня этот код установлен, чтобы создать меню с вкладками, и оно отображается нормально как меню с вкладками, но при загрузке сайта вкладки не меняются при нажатии. В «контрольном элементе» говорится:
$ ("#tabs") .tabs(); не является функцией. Я не знаю свой следующий шаг, чтобы исправить эту проблему.

<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> 

+0

вы должны инициализировать вкладку в состоянии готовности документа –

+5

Здесь нет ошибки. http://jsbin.com/kusisu/1/edit?html,js,console,output – colecmc

+0

@ManishShukla OP делает это с помощью '$ (function() {...', которая является сокращением для '$ (document). ready() {' – charlietfl

ответ

0

использовать это:

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

$ .noConflict() решается мой вопрос.