3

我一直在旋转我的轮子并寻找答案一段时间，所以我想我会发布。

尝试将简单的 JQuery 选项卡添加到 visualforce 页面，我已经验证 jquery 和 jquery ui 正在加载。我过去做过这个，不记得是“陷阱”了。有任何想法吗？

这是我的简单代码：

<code>
<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false" doctype="html-5.0" cache="false">
<head>
</head><apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"/>
</head>
<body>

    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>       
      <div id="tabs-1">
        <p>Content for tabs-1</p>
      </div>
      <div id="tabs-2">
        <p>Content for tabs-2</p>
      </div>
      <div id="tabs-3">
        <p>Content for tabs-3</p>
      </div>      
    </div>

</body>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery( "#tabs" ).tabs();
    });
</script>
</apex:page>
</code>
4

1 回答 1

2

我认为您可能需要更新您的 jQuery 引用。您包含的混合似乎不起作用。

将 your's 与 jQuery 1.6.4 和 jQuery UI 1.8.7 一起使用会导致所有选项卡的内容显示在所有选项卡上。

演示- 使用您的参考资料，选项卡始终显示所有内容

尝试使用jQuery UI DEMO 页面中使用的引用。

http://code.jquery.com/jquery-1.8.3.js  
http://code.jquery.com/ui/1.9.2/jquery-ui.js  
http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css

DEMO - 使用来自 DEMO 的引用的选项卡

来自演示的 HTML：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>

    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for tabs-1</p>
  </div>
  <div id="tabs-2">
    <p>Content for tabs-2</p>
  </div>
  <div id="tabs-3">
    <p>Content for tabs-3</p>
  </div>
</div>

脚本

jQuery.noConflict();
jQuery(document).ready(function () {
  jQuery("#tabs").tabs();
});
于 2013-01-11T21:49:41.647 回答