Question

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

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

Answer 1

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

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

DEMO - 使用您的引用，标签始终显示所有内容

请尝试使用jQuery UI DEMO page中使用的引用。

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

引用的标签

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

jQuery / Visualforce Tabs没有加载

1 个答案: