2013-01-11 151 views
3

我一直在旋转我的轮子,并寻找一段时间的答案,所以我想我会发布。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> 

回答

2

我想你可能需要更新您的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(); 
});