visualforce示例中的jquery选项卡不起作用

时间:2012-12-07 05:29:56

标签: jquery jquery-ui salesforce visualforce

您好我正在写一个简单的visualforce页面源代码

<apex:page >
  <!-- Begin Default Content REMOVE THIS -->

  <head>
   <apex:includeScript value="{!URLFOR($Resource.UIJQuery1822, 'js/jquery-1.7.2.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Bootstrap, 'bootstrap/js/bootstrap.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Bootstrap, 'bootstrap/js/bootstrap.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'bootstrap/css/bootstrap.min.css')}"/> 
    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'bootstrap/css/bootstrap.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'bootstrap/css/bootstrap-responsive.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'bootstrap/css/bootstrap-responsive.css')}"/>

    <script type="text/javascript">
   $(function() {
        $( "#tabset" ).tabs();
    });
    </script>
  <Title>Hello World</Title></head>
  <Body>
  <div id="tabset">
  <ul>
  <li><a href="#panel1">Tab One</a></li>
  <li><a href="#panel2">Tab Two</a></li>
  <li><a href="#panel3">Tab Three</a></li>
  </ul>
  <div id="panel1"> Hello World1</div>
  <div id="panel2">Hello World2</div>
  <div id="panel3">Hello World3 </div>

  </div>
  </Body>

</apex:page>

我正在尝试创建一组三个选项卡,但它显示一个无序列表和三个div元素没有选项卡,意味着jquery代码不起作用。可以任何人请告诉我为什么它不起作用,并给我建议如何使它工作?

1 个答案:

答案 0 :(得分:0)

JQuery文件是执行某些操作所必需的,而jquery ui是标签所必需的,请查看以下链接jqueryui.com / tabs /必需文件以获取带有jquery code.jquery.com/ui/1.9.2/jquery-的选项卡ui.js code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css