Почему не работают вкладки jQuery ui? - PullRequest
Новая
       21

Почему не работают вкладки jQuery ui?

3 голосов
/ 29 ноября 2011

Я нашел тот же вопрос здесь JQuery UI вкладки не работают , но это не помогло мне.Это мой HTML-код, который должен создавать вкладки, но он не работает: 

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
        <link rel="stylesheet" href="jquery.ui.all.css">
    <script src="jquery-1.7.js"></script>
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.tabs.js"></script>

    <script>
        $(function() {
            $( "#tabs" ).tabs();
        });
   </script>
</head>
<body>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <p>Content 1.</p>
</div>
<div id="tabs-2">
    <p>Content 2.</p>
</div>
<div id="tabs-3">
    <p>Content 3.</p>
</div>
</div>

</body>
</html>

и вывод этого HTML-кода следующий: 

     . Nunc tincidunt
     . Proin dolor
     . Aenean lacinia
 Content 1.

 Content 2.

 Content 3.

элементы списка должны отображаться как вкладки, но они отображаюткак список.Почему это так?Заранее спасибо.

Ответы [ 8 ]

6 голосов
/ 29 ноября 2011

Скорее всего, ваш jQuery выполняется до загрузки DOM, попробуйте это: 

$(document).ready(function () {

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

});
4 голосов
/ 22 июля 2013

Если вы не нашли ответ, это вызвано либо старой, либо несовпадающей версией jQuery / jQuery-ui.Обновите и то, и другое должно работать как шарм!

1 голос
/ 29 ноября 2011

Попробуйте использовать эти скрипты вместо своих (просто замените нижние строки): 

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   <script type="text/javascript">
       $(function() {
           $("#tabs").tabs();
       });
   </script>

Также измените источник CSS файла на этот: 

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />

Полагаю, вы не очень хорошо указали JS Source для jQuery. Надеюсь, это поможет!

0 голосов
/ 23 февраля 2017

HTML анализируется сверху вниз.Ваша функция обращается к идентификатору, называемому tabs, перед его обработкой.

Из ваших импортных данных также не ясно, что все ваши зависимости JQuery имеют одну и ту же версию.

Вот SSCCE : 

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>

  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">1</a></li>
      <li><a href="#tabs-2">2</a></li>
      <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">
      <p>Text 1</p>
    </div>
    <div id="tabs-2">
      <p>Text 2</p>
    </div>
    <div id="tabs-3">
      <p>Text 3</p>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</body>
</html>

Обратите внимание на следующее:

  1. Тема пользовательского интерфейса JQuery в теге <head>.Я использовал «base» для этого примера.

  2. Основной файл JS JQuery, перемещенный в конец скрипта и объявленный перед файлом JS расширения JQuery UI.

  3. Файл JS расширения JQuery UI, перемещенный в конец скрипта и объявленный после основного JS-файла JQuery.

  4. БлокJavascript, который вызывает функцию tabs для контейнера, был перемещен в положение сценария после того, как контейнер был создан в HTML и после загрузки JS-зависимостей JQuery.

  5. Все номера версийсогласен на зависимости JQuery.

0 голосов
/ 14 июля 2015

У меня была такая же проблема, и это решило ее для меня:

<a href="#divdata" data-ajax="false">link</a>

0 голосов
/ 27 июня 2013

Убедитесь, что вы не загружаете JQuery Javascript дважды на своей странице.Если вы загружаете его более одного раза или загружаете 2 разные версии скрипта, это вызовет эту проблему.

0 голосов
/ 29 ноября 2011

Вы забыли вызвать скрипт jquery-ui: 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
0 голосов
/ 29 ноября 2011

Лучшая практика - ссылаться на скрипты как можно ближе к концу тела.

Сценарий выполняется до загрузки HTML, поэтому при вызове $("#tabs").tabs() на странице еще нет элемента с id из tabs.

Попробуйте переместить сценарии в конец страницы и посмотрите, поможет ли это: 

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
       </ul>
       <div id="tabs-1">
           <p>Content 1.</p>
       </div>
       <div id="tabs-2">
           <p>Content 2.</p>
       </div>
       <div id="tabs-3">
           <p>Content 3.</p>
       </div>
   </div>
   <script src="jquery-1.7.js"></script>
   <script src="jquery.ui.core.js"></script>
   <script src="jquery.ui.widget.js"></script>
   <script src="jquery.ui.tabs.js"></script> 
   <script>
       $(function() {
           $( "#tabs" ).tabs();
       });
   </script>
</body>
</html>
...