zoukankan      html  css  js  c++  java
  • 像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>
  • 相关阅读:
    常见概念
    网站扒取
    图书管理系统易错点整理
    CSIC_716_2020104【Django入门---静态文件、request对象方法、ORM增删改查】
    CSIC_716_2020103【Django入门---HttpResponse、render、redirect】
    CSIC_716_2020102【前端框架Bootstrap】
    CSIC_716_2020101【???】
    CSIC_716_20191231【jQuery基础入门】
    CSIC_716_20191230【前端的BOM与DOM】
    ss
  • 原文地址:https://www.cnblogs.com/wubiyu/p/807060.html
Copyright © 2011-2022 走看看