实践用CSS制作框架页效果(3)

实践用CSS制作框架页效果(3)

- 中国WEB开发者网络 (http://www.webasp.net)
-- 技术教程 (http://www.webasp.net/article/)
--- 实践用CSS制作框架页效果(3) (http://www.webasp.net/article/24/23893.htm)

-- 作者：陈孝强
-- 发布日期： 2005-05-12

4、建立显示/隐藏表格的JavaScript函数

在页面的<Head>标记内部建立一个JavaScript函数，这个函数的作用就是根据用户在导航表格中选择的链接来对其他表格进行显示隐藏操作。我们将这个函数命名为switchCell()：
function switchCell(n) {
     for(i=0;i<navcell.length;i++){
     navcell[i].className="tab-off";
     tb[i].style.display="none";
               }
     navcell[n].className="tab-on";
     tb[n].style.display="block";
}

witchCell()函数被调用时将会收到一个参数n，这个参数就是用户打开的链接的索引号（从0开始编号），后面的代码将会根据这个索引号显示相应的表格并隐藏其他的表格。

例如当用户打开“页面B”链接时将会调用函数switchCell(1)。switchCell()接受到参数1后，首先利用一个循环对navcell[]和ta[]这两个数组进行遍历：设置所有navcell[]中元素的className为tab-off，也就是将所有导航栏中的链接设置为关闭状态；设置所有tb[]中元素的style.display为none，也就是隐藏所有含有页面内容的表格。最后navcell[1]的className被设置为tab-on，而tb[1].style.display被设置为block，也就是将导航栏中的链接设置为打开状态，并显示页面B内容所在的表格。

总而言之，这种用CSS实现框架页效果的方法技巧性比较强，大家可以多揣摩，进行优化的余地还很大，而且将表格作为数组来操作的方法在页面设计中很值得借鉴。

webasp.net