zoukankan      html  css  js  c++  java
  • 实现经典的选项卡效果

    jQuery UI所支持的选项卡工具集

    jQuery UI插件的选项卡也是一种由一系列容器所组成的工具集,这些容器在同一时刻只有一个被打开。每个内容容器由标题和内容构成,当单击内容容器标题时,就可以访问该容器的包含的内容,每一个标题都作为独立的选项卡出现。对于每一个容器来说,都有与之相关联的选项卡。

    在页面中使用jQuery UI插件的选项卡工具集,需要经过以下步骤:

    在页面的head标签元素中添加选项卡工具集所支持的类库、样式表等资源,具体代码:

    <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
            <script type="text/javascript" src="js/jquery-ui.js" ></script>
            <link rel="stylesheet" href="css/jquery-ui.css" />
            

    通过tabs()方法进行封装DOM对象为jQuery对象,该方法的的具体语法:

    $(selector).tabs();

    其中,selector是选择器,用于选择将封装成选项卡工具集对象的容器。

    实现经典的选项卡功能通过应用jQuery UI插件中的(Tab)组件

    初始效果:

     初始HTML:

    <body>
            
            <div id="tabs" class="tabs-bottom">
                <ul>
                    <li><a href="#tabs-1"> perfect_01</a></li>
                    <li><a href="#tabs-2"> perfect_02</a></li>
                    <li><a href="#tabs-3"> perfect_03</a></li>
                </ul>
                
                <div class="tabs-spacer"></div>
                
                <!--设置选项卡的内容-->
                
                <div id="tabs-1">
                    <p>
                        
                        
                        perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01perfect_01
                    perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01  perfect perfect perfect
                    
                    perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect
                    
                    </p>
                </div>
                
                
                <div id="tabs-2">
                    <p>
                        
                        
                        perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_01perfect_01
                    perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01  perfect perfect perfect
                    
                    perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect
                    
                    </p>
                </div>
                
                
                <div id="tabs-3">
                    <p>
                        
                        
                        perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_01perfect_01
                    perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01  perfect perfect perfect
                    
                    perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect
                    
                    </p>
                </div>
                
                
                
                
            </div>
        </body>

    引入插件后,并且进行编写jQuery代码:

    效果:

    jQuery代码:

    <script>
                
                $(function(){
                    
                    $("#tabs").tabs();
                    //移除和添加样式
                    
                    $(".tabs-bottom .ui-tabs-nav,.tabs-bottom .ui-tabs-nav >*")
                    .removeClass("ui-corner ui-corner-top")
                    .addClass("ui-corner-bottom");
                    //设置标题到下面
                    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
                    $("#tabs").tabs({
                        
                        event:"mouseover"
                    });
                });
            </script>

    通过tabs()方法将对象tabs封装成选项卡对象:

     $("#tabs").tabs();

    设置相关的样式:

    //移除和添加样式
                    
                    $(".tabs-bottom .ui-tabs-nav,.tabs-bottom .ui-tabs-nav >*")
                    .removeClass("ui-corner ui-corner-top")
                    .addClass("ui-corner-bottom");

    设置选项卡的标题在下面,同时通过选项event设置选项卡切换内容的事件为mouseover.

    //设置标题到下面
                    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
                    $("#tabs").tabs({
                        
                        event:"mouseover"
                    });

    总的代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
            <script type="text/javascript" src="js/jquery-ui.js" ></script>
            <link rel="stylesheet" href="css/jquery-ui.css" />
            
            
            <script>
                
                $(function(){
                    
                    $("#tabs").tabs();
                    //移除和添加样式
                    
                    $(".tabs-bottom .ui-tabs-nav,.tabs-bottom .ui-tabs-nav >*")
                    .removeClass("ui-corner ui-corner-top")
                    .addClass("ui-corner-bottom");
                    //设置标题到下面
                    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
                    $("#tabs").tabs({
                        
                        event:"mouseover"
                    });
                });
            </script>
        </head>
        <body>
            
            <div id="tabs" class="tabs-bottom">
                <ul>
                    <li><a href="#tabs-1"> perfect_01</a></li>
                    <li><a href="#tabs-2"> perfect_02</a></li>
                    <li><a href="#tabs-3"> perfect_03</a></li>
                </ul>
                
                <div class="tabs-spacer"></div>
                
                <!--设置选项卡的内容-->
                
                <div id="tabs-1">
                    <p>
                        
                        
                        perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01perfect_01
                    perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01  perfect perfect perfect
                    
                    perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect
                    
                    </p>
                </div>
                
                
                <div id="tabs-2">
                    <p>
                        
                        
                        perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_01perfect_01
                    perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01  perfect perfect perfect
                    
                    perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect
                    
                    </p>
                </div>
                
                
                <div id="tabs-3">
                    <p>
                        
                        
                        perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_01perfect_01
                    perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01  perfect perfect perfect
                    
                    perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect
                    
                    </p>
                </div>
                
                
                
                
            </div>
        </body>
    </html>
    实现选项功能
  • 相关阅读:
    Nginx降权启动
    Tomcat降权启动
    【转载】XSS学习笔记
    仪仗队(容斥,欧拉,打表)
    2012蓝桥杯
    HPU周赛题目解析
    蓝桥杯真题集2011
    cf公式专场-续
    24点游戏&&速算24点(dfs)
    Parallelogram Counting(平行四边形个数,思维转化)
  • 原文地址:https://www.cnblogs.com/jiguiyan/p/10665526.html
Copyright © 2011-2022 走看看