Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例

 Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例_第1张图片Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例_第2张图片Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例_第3张图片Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例_第4张图片

示例图:

先下载

jquery-1.7.1.min.js和

js/jquery-ui-1.7.3.custom/development-bundle/ui/ui.tabs.js和js/jquery-ui-1.7.3.custom/development-bundle/ui/ui.accordion.js

然后把它拖到项目中,记得jquery-1.7.1.min.js导入项目必须在最前面。否则显示不了效果


    Jquery UI
   
   
   
   
            rel="stylesheet" type="text/css" />
       
       


   


   
//选项卡的开始
   
   

第一个选项卡的内容

测试
//每个子项中的内容 注意这里的id是被上面a标签引用的
   

第二个选项卡的内容


   

第三个选项卡的内容


   
//选项卡的结束
   

   
//折叠菜单的开始
   

    divAcc1菜单

//这是折叠的第一个头部
   
菜单1的内容1
菜单1的内容3
菜单1的内容2
//对应上的头部,
   

    divAcc2菜单

//这是折叠的第二个头部
   
菜单2的内容1
菜单2的内容2

   

    divAcc3菜单

//这是折叠的第三个头部
   
菜单3的内容
菜单3的内容

   

   
//折叠菜单的结束




    


   

   

    divAcc1菜单


   
菜单1的内容1
菜单1的内容3
菜单1的内容2

   

    divAcc2菜单


   
菜单2的内容1
菜单2的内容2

   

    divAcc3菜单


   
菜单3的内容
菜单3的内容

   

   

   


====================如有错误,请多多指教==========================

-----------------------------待续 ehtan-----------------------------------

 

你可能感兴趣的:(Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例)