像QQ一样的，好用的Navbar

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wubiyu/archive/2007/07/05/807060.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个使用HTML和JavaScript实现的动态导航栏示例。通过定义不同的导航项及其内容，并利用JavaScript来控制导航栏中各部分的显示与隐藏，从而实现了良好的交互效果。

<!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; width: 300px; background-color:Blue" navbartitleheight="25px">
        <div style="width: 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="width: 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="width: 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>

转载于:https://www.cnblogs.com/wubiyu/archive/2007/07/05/807060.html