用表格实现简单网站左侧导航

您现在的位置：.Net中文社区>> 实用代码>>正文内容

用表格实现简单网站左侧导航

发布时间：2010年04月04日点击数：次我是郭大侠

闲暇之余，制作一用表格实现的简单的网站导航条，分享给大家。
调用很简单，只要将数据组织成json格式即可：格式如下：

window.onload = function()

{

     var tf="if1";

     var data=[{m:"体育网站",s:[{sn:"百度体育",st:"http://news.baidu.com/n?cmd=1&class=sportnews"},

             {sn:"搜狐体育",st:"http://sports.sohu.com/"},

             {sn:"新浪体育",st:"http://sports.sina.com.cn/"}]},

         {m:"新闻网站",s:[{sn:"百度",st:"http://news.baidu.com/"},

             {sn:"搜狐",st:"http://news.sohu.com/"},

             {sn:"新浪",st:"http://news.sina.com.cn/"}]},

         {m:"视频网站",s:[{sn:"百度视频",st:"http://vedio.baidu.com/"},

             {sn:"搜狐视频",st:"http://tv.sohu.com/"},

             {sn:"新浪视频",st:"http://vedio.sina.com.cn/"}]}

        ];

    var nav=new tableNav("table1",data,tf);

    var bautoClose=false; //打开当前导航条时其它导航条是否关闭

    nav.generateNav(bautoClose);

}

整个实例代码如下：供初学者学习！

<!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>simple struct</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        #divtitle{

            border:solid 1px #000000;

            width:98%;

            height:100px;

            text-align:center;

        }

        #div1{

            border:solid 1px #000000;

            width:18%;

            height:700px;

            float:left;

        }

        #div2{



            width:80%;

            height:700px;

            float:left;

        }

        

        .oddrow{

            margin-top:1px;

        }

        .oddrow td{

            text-decoration:underline;

            background-color:#666666;

            color:#ccc;

            cursor:pointer;

        }

        

        .evenrow{

            display:none;

        }

        .evenrow a{

            margin-left:10px;

            margin-top:2px;

        }

        .evenrow td{

            background-color:#eee;

            display:block;

        }

    </style>



<script type="text/javascript">

    window.onload = function()

    {

        var tf="if1";

        var data=[{m:"体育网站",s:[{sn:"百度体育",st:"http://news.baidu.com/n?cmd=1&class=sportnews"},

                                  {sn:"搜狐体育",st:"http://sports.sohu.com"},

                                  {sn:"新浪体育",st:"http://sports.sina.com.cn"}]},

                  {m:"新闻网站",s:[{sn:"百度",st:"http://news.baidu.com"},

                                  {sn:"搜狐",st:"http://news.sohu.com"},

                                  {sn:"新浪",st:"http://news.sina.com.cn"}]},

                  {m:"视频网站",s:[{sn:"百度视频",st:"http://vedio.baidu.com"},

                                  {sn:"搜狐视频",st:"http://tv.sohu.com"},

                                  {sn:"新浪视频",st:"http://vedio.sina.com.cn"}]}

                 ];

        var nav=new tableNav("table1",data,tf);

        var bautoClose=false;    //打开当前导航条时其它导航条是否关闭

        nav.generateNav(bautoClose);

    }



    function tableNav(tblid,data,ifname)

    {

        var tbl= document.getElementById(tblid);

        //1.删除表格中存在的行

        for (var t = 0; t < tbl.rows.length;t++){tbl.deleteRow(t);}

        //2.添加数据

        var idx=0;

        for(var t=0;t<data.length;t++)

        {

            var row=tbl.insertRow(idx);

            var cell=row.insertCell(0);

            cell.innerHTML=data[t].m;

            row.className="oddrow";

            idx++;

            var row=tbl.insertRow(idx);

            row.className="evenrow";

            var cell=row.insertCell(0);

            for (var i=0;i<data[t].s.length;i++)

            {

                cell.innerHTML += "<a href='" +data[t].s[i].st+"' target='"+ ifname +"'>"+ data[t].s[i].sn +"</a><br />";

            }

            row.style.display="none";

            idx++;

        }

        this.generateNav=function(bautoClose){

            for (var i = 0; i < tbl.rows.length; i++)

            if (i % 2==0)

            {

                var obj = tbl.rows[i].getElementsByTagName("td")[0];

                obj.onclick = function()

                {

                    var o = this.parentNode.nextSibling;

                    if (o.nodeType != 1)

                    {

                        oo = o.nextSibling;

                    }

                    o.style.display = (o.style.display == "block") ? "none" : "block"

                    if (bautoClose)

                    {

                        for (var j = 1; j < tbl.rows.length; jj =j+ 2)

                        {

                            if (tbl.rows[j] !=o)

                            {

                                tbl.rows[j].style.display = "none";

                            }

                        }

                    }

                }

            }

        };

    }

</script>

</head>

<body >

    <div id="divtitle">

        <h1>用表格实现简单网站左侧导航</h1>

    </div>

    <div id="div1">

        <table id="table1">

        </table>

    </div>

    <div id="div2">

        <iframe id='if1' name='if1' src="" width="100%" height="100%" border=”0″ marginwidth=”0″ marginheight=”0″ allowtransparency=”yes"></iframe>

    </div>

</body>

</html>

用表格实现简单网站左侧导航

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新