Question

我正在使用jQuery为Web应用程序创建大量选项卡。到目前为止，我只使用了基本的例子provided from here而没有任何运气。选项卡内容有效，主题显示正确，但是当我单击选项卡时，选项卡的状态不会更改。这个应用程序必须在IE7下工作，任何其他浏览器都无所谓（我可能只是添加我不是IE7用户，我是一个狂热的Firefox用户）

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1"><span>Nunc tincidunt</span></a></li>
  <li class="ui-state-default ui-corner-top"><a href="#tabs-2"><span>Proin dolor</span></a></li>
</ul>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
  <p>Tab one content goes here.</p>
</div>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2">
  <p>Tab1 one content goes here.</p>
</div>

以下是jQuery's ThemeRoller提供的CSS，因此我的包含如下所示：

<link href="/intranet/common/stylesheets/jquery-ui/ui.all.css" rel="stylesheet" type="text/css" />
<script src="/intranet/common/javascript/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/intranet/common/javascript/jquery-ui.js" type="text/javascript"></script>

然后我使用以下内容启用标签：

<script type="text/javascript">
  $(document).ready(function() {
    $("#tabs > ul").tabs();
  });
</script>

正如我所说，标签内容有效，一切都是主题，但一旦我在标签上“点击”，标签的状态就不会变为活动状态。 ThemeRoller在IE7中工作，但我的页面没有。我不知道我哪里出错了，而且我已经玩了几个小时，至少试图让它运转起来。

有什么想法吗？

Answer 1

考虑升级到最新版本的jQuery（1.3）。我已经用1.2.6的旧css（flora）测试了你的代码并且它有效。使用我刚刚下载的ThemeRoller，它既不适用于Firefox也不适用于IE。

也可以尝试使用最新版本的jquery-ui。最安全的选择是直接从ThemeRoller下载尝试javascript文件和css文件和图像。

IE7选择状态下的jQuery选项卡

1 个答案: