Вкладки jQuery UI загружаются сначала как <ul>, затем в виде вкладок

Ответ 1

Это происходит потому, что вы вызываете $('# id'). tabs() в document.ready(), что происходит, когда DOM готов к обходу ^[1]. Обычно это означает, что страница была визуализирована, и поэтому <ul> отображается на странице как обычный <ul> без применения какого-либо стиля для табуляции.

Это не супер "чистый", но способ, которым я использую это, - добавить класс ui-tabs в <ul> в HTML, что заставляет его сразу же применять стиль CSS. Недостатком является то, что у вас нет 100% чистого разделения поведения и кода, но вверх он выглядит неплохо.

Ответ 2

Как и другие, это объясняется тем, что jQuery не отображает вкладки UL как до загрузки документа. Я столкнулся с этой проблемой, просто сокрыв вкладки, пока они не загрузятся. Таким образом, вы избавитесь от мерцания. Например:

<ul id="tabs" style="display: none;">
...
$(document).ready(function(){
  $('#tabs').tabs();
  $('#tabs').attr('display', 'block');
});

Ответ 3

Это нормально, но это не должно занимать несколько секунд. Сколько вы делаете в своей функции jQuery ready (AKA $()) до вызова $("#whatever").tabs()? Попробуйте переместить вызов этого метода в начало вашей готовой функции.

Ответ 4

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

Сначала я просто использовал следующий код для тега привязки:

<div id="tabs">
    <ul >
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-1" id="link1" ></a></li>
        <li style="list-style-image: none !important; list-style-type: none"><a href="#tabs-2" id="link2" ></a></li>
    </ul>
</div>

В функции Document ready я написал следующий (jQuery) код, чтобы назвать теги Anchor, используя:

$("#link1").text('Current');
$("#link2").text('Archived');  

Ответ 5

Я использую вкладки пользовательского интерфейса jQuery с большим успехом. Вот код, который я использую:

<div id="tabs">
    <ul>
        <li><a href="">
            <span>Applicant</span></a></li>
        <li><a href="">
            <span>Insured</span></a></li>
        <li><a href="">
            <span>Beneficiary</span></a></li>
        <li><a href="">
            <span>Billing</span></a></li>
        <li><a href="">
            <span>Summary</span></a></li>
    </ul>
</div>
<script type="text/javascript">

    $(function() {
        $tabs = $("#tabs").tabs({
            disabled: [1, 2, 3, 4],
            event: null,
            load: function(event, ui) {
                handleload(ui);
            },
            selected: 0
        });
    });

</script>

Как и в случае с порядком, я всегда ставил сначала jquery-ui.css, затем jquery.min.js и jquery-ui.min.js. Я использую последние версии (jQuery 1.3.2 и jQuery 1.7.2), все из которых хранятся в CDN Google.

Ответ 6

Проблема заключается в том, что css из jquery-ui предназначен для классов, которые jquery-ui script добавляют к DOM при загрузке страницы. Вместо добавления ui-tabs в HTML (как было предложено gregmac) вы можете просто добавить те же правила display к вашему CSS, чтобы применить к вашему идентификатору navbar. Когда jqueryui добавляет классы в элементы ul и list, CSS jqueryui берет верх.

Итак, добавьте это правило в свой css:

#navbarID li {
    display: inline;
}

Ответ 7

У меня была такая же проблема. Страница, на которой я определил вкладки, пропустила импорт jquery-ui css.

Код HTML:

 <div id="tabs">
    <ul>
        <li>
             <a href="connectionDetailsTab1.html?name=<%=  jmsConnectionName %>">Summary</a>

         </li>
    </ul>
 </div> 

В анкете href импортирован jquery-ui css, из-за которого вкладки отображаются правильно, после того, как вкладки загружаются. Но до этого он показывал ul без специального стиля табуляции. Исправлено было импортирование jquery-ui css в вышеупомянутый html. Используемая версия jquery-ui: 1.10.2

Ответ 8

Это происходит потому, что вы не загружаете файл jquery ui CSS в заголовке html-документа, а затем между интервалом между загрузкой страницы и CSS применялся интервал. Вы должны включить css перед js, например:

<link rel="stylesheet" type="text/css" href="resources/jquery/css/smoothness/jquery-ui-1.10.3.custom.min.css"/>

<script type="text/javascript" src="resources/jquery/js/jquery-ui-1.10.3.custom.min.js"></script>

Ответ 9

Скрыть основной div по умолчанию:

<div id="tabs" style="display: none;">

Затем в конце документа, где находится ваш script, просто удалите стиль:

<script>
    $("#tabs").removeAttr('style');
    $("#tabs").tabs();   
</script>

Ответ 10

Решение, которое работало для меня было установить display свойство стиля к none для div элемента, который содержит вкладки, а затем вызвать show() метод после того, как tabs() метод.

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

<div class="tabbody" id="tabs" style="display: none;">
    <!-- tab html -->
</div>