проблема с вкладками jquery в IE по сравнению с Firefox

Question

Я новичок в этом, так что если бы вы могли пролить немного света на меня, я был бы очень благодарен:

Я использую простую конструкцию вкладок jquery, которую я нашел на сайте, который даетхорошие примеры.Я заставил их работать на моем сайте, и они отлично работают под FireFox и под IE8.Но IE9, Chrome и Safari - подразделения, которые должны переключаться на вкладках, чтобы оставаться установленными на display = hidden.Я считаю, что код jquery должен изменить объект DOM, чтобы установить текущее выбранное деление равным display = block.

Мой вызов jquery такой:

<script type="text/javascript">
$(function() {
  $("ul.css-tabs").tabs("> .css-panes");
});
</script>

И мойРазметка HTML верна (я верю!).Похоже, что в IE9 jquery не может «найти» разделение, чтобы изменить его видимость, но в Firefox это возможно.

Любые намеки на что-либо, на что можно посмотреть, чтобы попытаться исправить это, будутценится ... Я схожу с ума, пытаясь это исправить ...

РЕДАКТИРОВАТЬ: Вот базовая конструкция моей разметки:

<div class="prodtabs">

  <ul class="css-tabs">
    <li><a href="#">Specs</a></li>
    <li><a href="#">Contents</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Warranty</a></li>
  </ul>

  <div class="css-panes">
    <p>stuff on tab 1</p><br />
  </div> <!-- css-panes -->

  <div class="css-panes">
    <p>stuff on tab 2</p><br />
  </div> <!-- css-panes -->

  <div class="css-panes">
    <p>stuff on tab 3</p><br />
  </div> <!-- css-panes -->

  <div class="css-panes">
    <p>stuff on tab 4</p><br />
  </div> <!-- css-panes -->

</div> <!-- prodtabs -->

Теперь это довольно глубоко обернутов других вещах (я использую слегка модифицированную версию WordPress для обслуживания этих страниц) - поэтому я не могу сказать, что нарушает этот вызов jquery, когда я в IE9 или Chrome, в отличие от того, что он отлично работает в FireFox...

Answer 1

Ваш базовый HTML и JavaScript, кажется, работают (по крайней мере, у меня это получилось в Chrome и IE9): http://jsfiddle.net/qTuLz/11/

Возможно, попробуйте добавить CSS, который вы используете для своего сайта, и посмотрите, есть ли проблема?

Answer 2

Проблема видна в консоли IE. Ваш скрипт videobox.js выдает ошибку в сценариях замораживания IE на странице. Удалите это, и вкладки будут работать.

У вас также есть Mootools на странице. Я предполагаю, что видео скрипт - это скрипт mootools. mootools также использует тот же объект "$", что и jQuery, но я не верю, что они предлагают метод, позволяющий не сталкиваться с jQuery.

jQuery, однако, предлагает решение с помощью метода noConflict (), подробности см. Здесь:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Answer 3

HTML

<div class="prodtabs">

<ul class="css-tabs">
    <li><a href="#tabs-1">Specs</a></li>
    <li><a href="#tabs-2">Contents</a></li>
    <li><a href="#tabs-3">Images</a></li>
    <li><a href="#tabs-4">Warranty</a></li>
</ul>

<div id="tabs-1" class="css-panes">
    <p>stuff on tab 1</p><br />
</div> <!-- css-panes -->

<div id="tabs-2" class="css-panes">
    <p>stuff on tab 2</p><br />
</div> <!-- css-panes -->

<div id="tabs-3" class="css-panes">
    <p>stuff on tab 3</p><br />
</div> <!-- css-panes -->

<div id="tabs-4" class="css-panes">
    <p>stuff on tab 4</p><br />
</div> <!-- css-panes -->

</div> <!-- prodtabs -->

JS

$("div.prodtabs").tabs();

Ссылка: http://jqueryui.com/demos/tabs