zoukankan      html  css  js  c++  java

  • 封装一个tab思想方法实现点击的时候显示或隐藏效果

    代码实现：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> tab方法 </TITLE>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.min.js"></script>
 </HEAD>
 <style>
    #page{1200px;}
    #content-left{
        200px;
        height:700px;
        border:1px solid #ccc;
        position:relative;
        float:left;
    }
    a{
        text-decoration:none;
        color:#666;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;    
    }
    #function-menu{
        position:absolute;
        bottom:10px;
    }
    #function-menu li{
        cursor:pinter;
    }
    #function-menu-top ul{
        display:none;
    }
    #function-menu-top .current-function{
        display:block;
    }
    .active{
        background:#235;
    }
    #content-main{
        600px;
        height:700px;
        border:1px solid #ccc;
        margin-left:10px;
        float:left;
    }
    #content-main div{
        display:none;
    }
    #content-main .current-tab{
        display:block;
    }
    .clear{
        clear:both;
    }
 </style>
 <BODY>
 <div id="page">
    <div id="content-left">
        <ul id="function-menu">
            <li class="active"><a href="#function-menu-1">业务受理</a></li>
            <li><a href="#function-menu-2">业务配置</a></li>
        </ul>
        <div id="function-menu-top">
            <ul id="function-menu-1" class="current-function">
                <li class="active"><a href="#tab1">互动客服</a></li>
                <li><a href="#tab2">微博查询</a></li>
                <li><a href="#">历史消息</a></li>
                <li><a href="#">私信查询</a></li>
            </ul>
            <ul id="function-menu-2">
                <li><a href="#">微博查询</a></li>
                <li><a href="#">微博查询</a></li>
                <li><a href="#">微博查询</a></li>
                <li><a href="#">微博查询</a></li>
            </ul>
        </div>
    </div>

    <div id="content-main">
        <div id="tab1"  class="current-tab">
            content1
        </div>
        <div id="tab2">
            content2
        </div>
    </div>
    <div class="clear"></div>
</div>
    <script>
        /*封装tab方法*/
        $(document).ready(function(){
            change1.step();
            change2.step();
        })
        function Change(change){
            this.li=change.li;
            this.ul=change.ul;
            this.adclass=change.adclass;
            this.step=function(){
                (this.li).click(function(){
                (change.li).removeClass("active");
                $(this).addClass("active");
                (change.ul).hide();
                var activeTab=$(this).find("a").attr("href");
                $(activeTab).addClass(change.adclass).show();
               });
            }
        }


        var CHANGE1={
            li:$("#function-menu li"),
            ul:$("#function-menu-top ul"),
            adclass:"current-function"
        }


        var change1=new Change(CHANGE1);
        
        var CHANGE2={
            li:$("#function-menu-1 li"),
            ul:$("#content-main div"),
            adclass:"current-tab"
        }
        var change2=new Change(CHANGE2);


    </script>
 </BODY>
</HTML>

    实现效果：
  • 相关阅读:
    .NET委托与事件文章收集
    WCF简介
    设计模式之单例模式
    设计模式之工厂模式
    设计模式之简单工厂模式
    Jquery中bind和live的区别
    C#性能优化实践
    蒋金楠How ASP.NET MVC Works?[持续更新中…]
    按指定质量保存图片
    .net 获取网站根目录总结
  • 原文地址：https://www.cnblogs.com/liyuhuan/p/5426684.html
Copyright © 2011-2022 走看看