IE与Firefox中jquery选项卡的问题

我是这方面的新手，因此，如果您能为我提供一些信息，我将非常感激：

我正在使用一个简单的jquery选项卡构造，我在一个提供了很好示例的站点上找到了它。我让他们在我的网站上工作，他们在FireFox和IE8下工作得很好。但是IE9、Chrome和Safari——标签应该切换到的分区保持在显示=隐藏状态。我认为jquery代码应该修改DOM对象，将当前选择的分区设置为display=block

我对jquery的调用如下：

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

$（函数（）{
$（“ul.css选项卡”）.tabs（“>.css窗格”）；
});

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

表1中的内容


表2的内容


表3中的内容


表4中的内容

现在，这已经被其他东西深深地包裹住了（我正在使用一个稍微修改过的WordPress版本来提供这些页面）——所以我不知道当我在IE9或Chrome中时，是什么破坏了这个jquery调用，而在FireFox中它工作得很好…

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

---

参考：

您的基本HTML和JavaScript似乎工作正常（至少在Chrome和IE9中是这样）：

---

也许可以尝试添加您用于站点的CSS，看看是否存在问题？

问题可以在IE控制台中看到。您的videobox.js脚本在IE冻结页面上的脚本时抛出错误。移除该选项卡，选项卡将正常工作

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

但是，jQuery提供了一个使用noConflict（）方法的解决方案，完整详细信息如下：

---

我认为这不是一个有效的选择器。试试

$（'ul.css-tabs>.css panes'）.tabs（）

。让我们看看你的html结构，也许还有一个指向你找到的标签示例的链接？我的页面在这里：www.autobody101.com/content/devilbiss-spray-guns/我使用的示例来自这里：谢谢minitech，但这一更改在每个浏览器上都会破坏它…谢谢谢赫-尽管它不起作用。我喜欢为每个窗格使用不同ID的想法——但是我的页面在一个页面上呈现这些选项卡的多个实例，因此我必须使用我的jquery选择器版本——它不能与您的版本一起使用。谢谢，我在哪里可以找到这种标签系统的参考资料？Sheikh看看这个网站：flowplayer.org/tools/demos/tabs/multiple.html我发现它是一个很好的资源。哇-JSFIDLE工具非常酷，我甚至不知道它的存在。是的，我添加了我的CSS和另一个标签实例（我在一个页面上有多个标签）——它在Chrome中运行良好。唉…这意味着“其他东西”正在我的网站上破坏它。我想我应该添加我的HTML，向外工作，直到它崩溃（？）这通常是我解决这类问题的方法：）这比我想象的要快，尝试你的建议——它工作！！非常感谢你！！我已经在我的网站上工作了32个小时，试图解决这个问题。如果你在这里，我会拥抱你——所以你可能很高兴你不在这里：-）

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