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版本来提供这些页面） - 所以当我在IE9中时，我不知道是什么打破了这个jquery调用或Chrome，与FireFox中的工作正常......

Answer 1

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

Answer 2

您的基本HTML和JavaScript似乎有效（至少在Chrome和IE9中对我有用）：http://jsfiddle.net/qTuLz/11/

也许尝试添加您用于网站的CSS并查看问题是否存在？

Answer 3

问题可以在IE控制台中看到。您的videobox.js脚本在页面上的IE冻结脚本中引发错误。删除它，标签将起作用。

页面中还有Mootools。我的猜测是视频脚本是mootools脚本。 mootools也使用与jQuery相同的“$”对象，但我不相信它们提供了一种不与jQuery冲突的方法。

然而，jQuery提供了一个noConflict（）方法的解决方案，详细信息请参见：

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

IE与Firefox中的jquery选项卡问题

3 个答案: