• 像QQ一样的,好用的Navbar


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <div id='navBar' style="height: 490px; 300px; background-color:Blue" navbartitleheight="25px">
            <div style=" 100%; color: White; vertical-align: middle;" class="Title" id="Div8">
                <div style="cursor: pointer; background-color: Black;"  >
                    策略基本信息
                </div>
                <div style="" id="Div9">
                    asdsdafsadfasdf
                </div>
            </div>
            <div style=" 100%; color: White; vertical-align: middle;" class="Title" id="Div1">
                <div style="cursor: pointer; background-color: Black;" >
                    策略基本信息
                </div>
                <div style="" id="Div2">
                    asdsdafsadfasdf
                </div>
            </div>
            <div style=" 100%; color: White; vertical-align: middle;" class="Title" id="Div3">
                <div style="cursor: pointer; background-color: Black;" >
                    策略基本信息
                </div>
                <div style="" id="Div4">
                    asdsdafsadfasdf
                </div>
            </div>
        </div>
        <script language="javascript" type="text/javascript">
            function NavBar(navBarName,selectItemIndex)
            {
                NavBar.NavBarobj=this.GetRootNode(navBarName);
                NavBar.Items=this.GetItems();
                //alert(NavBar.Items.length);
                NavBar.SelectItemIndex=selectItemIndex;
                
            }
            
            NavBar.prototype.ActiveItem=function()
            {
                for(var i=0;i<NavBar.Items.length;i++)
                {
                    
                    if(NavBar.SelectItemIndex == i)
                    {
                        NavBar.Items[i].Content.style.display="";
                    }
                    else
                    {
                        
                        NavBar.Items[i].Content.style.display="none";
                    }
                   // alert(i+" "+NavBar.SelectItemIndex+" "+NavBar.Items[i].Content.id+" "+NavBar.Items[i].Content.style.display);
                }
            }
            
            NavBar.prototype.GetItems=function()
            {
                 var items = new Array();
                 for(var i=0;i<NavBar.NavBarobj.childNodes.length;i++)
                 {
                    items[i] = new NavBarItems(NavBar.NavBarobj.childNodes(i));
                    if( NavBar.NavBarobj.navbartitleheight != 'undefined' )
                    {
                        items[i].Title.style.height=NavBar.NavBarobj.navbartitleheight;
                        //alert((NavBar.NavBarobj.style.height.-(NavBar.NavBarobj.childNodes.length*NavBar.NavBarobj.navbartitleheight)))
                        if(NavBar.NavBarobj.style.height != '100%')
                        {
                            items[i].Content.style.height=parseInt(NavBar.NavBarobj.style.height)-(NavBar.NavBarobj.childNodes.length*parseInt(NavBar.NavBarobj.navbartitleheight));
                        }
                    }
                    
                 }
                 return items;
            }
            
            NavBar.prototype.GetRootNode=function(NavBarName)
            {
                var root = document.getElementById(NavBarName);
                return root;
            }
            
            function NavBarItems(itemNode)
            {
                this.Title=itemNode.firstChild;
                this.C.lastChild;
            }
            //入回函数
            function NavBarItemCreate(navBarName,selectIndex)
            {
                var navBar=new NavBar(navBarName,selectIndex);
                navBar.ActiveItem();
            }
        </script>
        <script language="javascript" type="text/javascript">
            NavBarItemCreate('navBar',0);
        </script>
    </body>
    </html>
  • 相关阅读:
    图解SQL的Join(转)
    phpmyadmin 自动登录的办法
    ajax的data传参的两种方式
    如何在vue里面访问php?
    vue 路由部署服务器子目录问题
    Vuthink正确安装过程
    关于vueThink框架打包发布的一些问题
    使用npm安装依赖,尽量别使用cnpm,会漏掉很多依赖的
    phpstorm(或webstorm) 打开后 一直停留在scanning files to index....,或跳出内存不够的提示框
    vuethink 配置
  • 原文地址:https://www.cnblogs.com/wubiyu/p/807060.html
Copyright © 2020-2023  润新知