您的位置：首页 > Web前端 > JQuery

jQuery 入门教程(41): jQuery UI Tab 示例（一）

2013-05-06 08:32 549 查看
Tab 显示多个标签页，每个标签含有一个标签头和一个Panel（显示标签的内容）。基本用法首先使用HTML定义用来作为Tab，一般使用列表（ul ,li) 来定义标签页的标题，每个标题使用href 链接到每个页面的内容页，比如下例定义了三个标签页：
1
<
div
id
=
"tabs"
>
2
<
ul
>
3
<
li
><
a
 
href
=
"#tabs-1"
>Nunc tincidunt</
a
></
li
>
4
<
li
><
a
 
href
=
"#tabs-2"
>Proin dolor</
a
></
li
>
5
<
li
><
a
 
href
=
"#tabs-3"
>Aenean lacinia</
a
></
li
>
6
</
ul
>
7
<
div
 
id
=
"tabs-1"
>
8
<
p
>Proin elit arcu, rutrum commodo, vehicula tempus, </
p
>
9
</
div
>
10
<
div
 
id
=
"tabs-2"
>
11
<
p
>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </
p
>
12
</
div
>
13
<
div
 
id
=
"tabs-3"
>
14
<
p
>Mauris eleifend est et turpis. Duis id erat. </
p
>
15
<
p
>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </
p
>
16
</
div
>
17
</
div
>
然后使用jQuery 的 tabs()方法把这部分Html元素变为标签页
1
<
script
>
2
$(function () {
3
$("#tabs").tabs();
4
});
5
</
script
>


 « jQuery 入门教程(40): jQuer...
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航