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

Question

Я использую пользовательский интерфейс jQuery и элемент управления вкладками на ряде страниц. Похоже, что при загрузке страницы вкладки сначала загружаются как простой список, а затем переходят на вкладку.

Когда я первоначально загружаю страницу, я получаю это:

Затем, через несколько секунд, он переключается на это (так и должно быть):

Есть идеи, почему это происходит? Нужно ли загружать файлы .js и / или .css в определенном порядке? Или есть способ скрыть начальный список и отображать вкладки только после их загрузки?

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

Answer 5

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

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

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

В функции «Готовность к документу» я написал следующий (jQuery) код для именования тегов Anchor:

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

Answer 6

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

Answer 7

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

HTML-код:

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

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

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

Answer 8

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

Так что добавьте это правило к вашему CSS:

#navbarID li {
    display: inline;
}

Answer 9

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

<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), все они поданы с Google CDN.