$ (...). tabs не является функцией

У меня этот код на двух страницах на моем сайте, но на одной странице функция не работает. Firebug показывает мне "$ (...). Tabs не является функцией". Я не понимаю, почему, может ли кто-нибудь сказать мне, что не так?

это работает: http://www.invat-online.net/variante-rezolvate

это не работает: http://www.invat-online.net/variante-explicate-limba-romana/varianta-01

Вот код:

<div id="tabss">
    <ul>
        <li><a href="#SubiectI">Subiect I</a></li>
        <li><a href="#SubiectII">Subiect II</a></li>
        <li><a href="#SubiectIII">Subiect III</a></li>
    </ul>
    <div id="SubiectI">content here</div>
    <div id="SubiectII">content here</div>
    <div id="SubiectIII">content here</div>
</div>

$(document).ready(function() {
   $("#tabss").tabs();
});

Ответы

Ответ 1

У вас есть относительные пути к файлам javascript:

javascript/jquery-ui-1.9.2.custom.min.js

измените их на абсолютные пути, потому что вы используете mod_rewrite module

/javascript/jquery-ui-1.9.2.custom.min.js

В первой ссылке сервер ищет каталог

http://www.invat-online.net/javascript/my_js_file.js (который существует)

но во втором пути будет

http://www.invat-online.net/variante-explicate-limba-romana/javascript/my_js_file.js, которые не существуют

Ответ 2

Проблема заключается в том, что jQuery UI js и css не загружается.

Попробуйте изменить путь в тегах <script> к каталогу выше ../javascript или к корню сайта /javascript.

<script src="/javascript/head.min.js"></script>
<script src="/javascript/jquery-ui-1.9.2.custom.min.js"></script>
<link href="/stylesheets/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />

Ответ 3

В моем случае:

Я использовал

jquery-ui-1.10.3.minimal.min.js

вместо

jquery-ui-1.10.3.custom.min.js

минимальная версия не включает ui.tabs.js, следовательно, нет функции ui.tabs. Надеюсь, это поможет кому-то еще

Ответ 4

Ваша первая демонстрационная загрузка:

http://www.invat-online.net/javascript/jquery-ui-1.9.2.custom.min.js

Вторая демонстрация пытается загрузить:

http://www.invat-online.net/variante-explicate-limba-romana/javascript/jquery-ui-1.9.2.custom.min.js

Последнее приводит к 404. Вы должны исправить путь позже, возможно, поручив ему найти jQuery UI в одном каталоге выше текущего: ../jquery-ui-1.9.2.custom.min.js.

Ответ 5

Попробуйте следующее:

@section scripts{
$(document).ready(function() {
    $("#tabss").tabs();
});
}

Поместите @Scripts.Render("~/bundles/jqueryui") в <body></body> вашего layout.cshtml

Ответ 6

Это также может произойти, если вы используете Django Admin при следующих обстоятельствах:

Ошибка "Uncaught TypeError: $ (...). Tabs не является функцией" выдается при использовании django-tabbed-admin при следующей настройке:

  • Джанго = 1.10.5
  • Джанго вкладками-админ = 1.0.4
  • DEFAULT_JQUERY_UI_JS = 'tabbed_admin/js/jquery-ui-1.11.4.min.js'

Проблема в том, что код в jquery-ui-1.11.4.min.js выглядит следующим образом:

    /*! jQuery UI - v1.11.4 - 2015-07-27
    (...)*/
    jQuery = jQuery \|\| django.jQuery.noConflict(false);

и код на django-tabbed-admin использует его следующим образом (change_form.html):

    <script type="text/javascript">
        (function($) {
            $(window).scrollTop()
            $('#tabs').tabs({
                {% if add %}
                // when adding, don't select a tab by default, we'll do it ourselves
                // by finding the first available tab.
                selected: -1
                {% endif %}
            });
        (....)
        })(django.jQuery);
    </script>
    <!-- end admin_tabs stuff -->

Чтобы разобраться в этом, это должно быть то, что будет передано во IIFE вместо (django.jQuery), как указано выше:

<script type="text/javascript">
        (function($) {
            (....)
        })((typeof window.jQuery == 'undefined' && typeof window.django != 'undefined')
  ? django.jQuery
  : jQuery)
    </script>
    <!-- end admin_tabs stuff -->

Я сообщил об этой проблеме в проекте и создал PR с исправлением. В ожидании его утверждения, а пока вы можете отсортировать его, следуя моему простому исправлению.

Я надеюсь, что это помогает кому-то там.

Ответ 7

У меня была та же проблема, я понял, что у меня есть импорт jquery и bootstrap css, которые вступают в конфликт друг с другом. Взгляните на те, которые вы импортировали, и уменьшите их импорт до минимума, чтобы увидеть, что является конфликтом.

Вот пример того, как его реализовать, я взял этот пример и работал, затем адаптировался к своему приложению:

для jquery 1.9 (нажмите источник просмотра, чтобы увидеть код) http://jqueryui.com/tabs/

для jquery 1.8 (проверьте пример в конце страницы) http://api.jqueryui.com/1.8/tabs/

Надеюсь, что это поможет!