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

熊孩纸阅读：677 2021-04-01 09:57:37 评论：0

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

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。