惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Microsoft Azure Blog
Microsoft Azure Blog
WordPress大学
WordPress大学
小众软件
小众软件
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
V2EX
Hugging Face - Blog
Hugging Face - Blog
美
美团技术团队
博
博客园 - 三生石上(FineUI控件)
Last Week in AI
Last Week in AI
酷 壳 – CoolShell
酷 壳 – CoolShell
博
博客园 - Franky
Microsoft Security Blog
Microsoft Security Blog
Y
Y Combinator Blog
A
About on SuperTechFans
The GitHub Blog
The GitHub Blog
U
Unit 42
H
Hackread – Cybersecurity News, Data Breaches, AI and More
云风的 BLOG
云风的 BLOG
IT之家
IT之家
MyScale Blog
MyScale Blog
V
Visual Studio Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
I
InfoQ
博
博客园 - 司徒正美

博客园 - 郭大侠

【原创】还有比我这更简单的静态树吗? - 郭大侠 - 博客园 asp.net获得路径的方法 div里面套3个div，居中显示，兼容ie6-8，ff，咋就这么麻烦呢 网站设计之asp.net网站多语言版本 vs2005常用快捷键 Repeater显示父子表数据,无闪烁 jquery学习相关 show div and mouse can move on the div js map js+div+css 模拟弹出对话框 送大家一首歌曲，《保卫延安》片尾曲 vs2005调试javascript url重写 总有人问js二级联动问题，给出我写的一个例子 - 郭大侠 - 博客园 oracle横表变竖表问题 中国房地产的实质 北京奥运会赛事电视直播表（绝对完整）--每天就抱着电视看吧！ 动物为什么会预知地震,地震后为什么会下雨? 新工资税计算方法及年终奖个税算法
用表格实现简单网站左侧导航
郭大侠 · 2010-04-04 · via 博客园 - 郭大侠

闲暇之余，制作一用表格实现的简单的网站导航条，分享给大家。

调用很简单，只要将数据组织成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);
}

 原理很简单,简单解释如下,我们来看一个有6行1列的表格。
<table>

 　　<tr><td>体育网站</td></tr>
　　<tr><td><a>aaa</a><br/><a>bbb</a><br/></td></tr>

　　<tr><td>新闻网站</td></tr>
　　<tr><td></td></tr>
　　<tr><td>视频网站</td></tr>
　　<tr><td></td></tr>

</table>

初始化时，将第1，3，5，。。。行显示，第2，4，6，。。行隐藏，然后在奇数行的点击事件中隐藏或显示其后一个偶数行，适当加一些样式及可。

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

<!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;
        }

        <!--偶数行,0,2,4...-->
        .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)
                    {
                        o = o.nextSibling;
                    }
                    o.style.display = (o.style.display == "block") ? "none" : "block"
                    if (bautoClose)
                    {
                        for (var j = 1; j < tbl.rows.length; j =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>

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。