jQuery/Visualforce标签未加载

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

尝试添加简单的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>

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

使用jQuery 1.6.4和jQuery UI 1.8.7将导致所有选项卡的内容显示在所有选项卡上。

DEMO -使用引用，选项卡总是显示所有内容

尝试使用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 - tab使用DEMO

中的引用

from DEMO:

<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();
});

相关内容

最新更新

热门标签：