0

我正在使用 jQuery 为 Web 应用程序创建大量选项卡。到目前为止，我只使用了这里提供的基本示例，没有任何运气。选项卡内容有效，主题显示正确，但是当我单击选项卡时，选项卡的状态没有改变。此应用程序必须在 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 的 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 中工作，但我的页面没有。我不知道我哪里出错了，我已经玩了几个小时至少试图让它工作。

有任何想法吗？

4

1 回答 1

2

考虑升级到最新版本的 jQuery (1.3)。我已经用 1.2.6 的旧 css (flora) 测试了你的代码，它可以工作。使用我刚刚下载的 ThemeRoller，它不适用于 Firefox 或 IE。

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

于 2009-01-22T08:56:29.037 回答