资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

在HTML页面中实现一个简单的Tab-创新互联

参考:http://blog.sina.com.cn/s/blog_6cccb1630100m23i.html在HTML页面中实现一个简单的T
ab

HTML页面代码如下:

创新互联建站专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管,支持按月付款!我们的承诺:贵族品质、平民价格,机房位于中国电信/网通/移动机房,绵阳电信机房机柜租用服务有保障!
Tab页切换DIVCSSJavaScriptHTML的DIV控件是其他控件的容器。当要以编程方式生成控件、隐藏/显示一组控件或本地化一组控件时,该控件尤其有用。级联样式表 (CSS) 包含应用于网页中的元素的样式规则。这些样式定义元素的显示方式以及元素在页面中的放置位置Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。

简单的JavaScript代码如下:

function tabPageControl(n)
{
for (var i = 0; i < tabTitles.cells.length; i++)
{
tabTitles.cells[i].className= "tabTitleUnSelected";
}
tabTitles.cells[n].className= "tabTitleSelected";

for (var i = 0; i < tabPagesContainer.tBodies.length; i++)
{
tabPagesContainer.tBodies[i].className= "tabPageUnSelected";
}
tabPagesContainer.tBodies[n].className= "tabPageSelected";
}

简单的CSS代码如下:

body{text-align:center;}
.tabTitlesContainer{text-align:center;font-size:small;cursor:hand;width:300px;border-width:thin;}
.tabTitleUnSelected{background-color:Silver;width:100px;}
.tabTitleUnSelected:hover{background-color:Orange;}
.tabTitleSelected{background-color:Gray;width:100px;}
#tabPagesContainer{text-align:left;font-size:small;font-size:small;width:300px;}
.tabPageUnSelected{background-color:Orange;display: none;}
.tabPageSelected{background-color: Orange;display:block;}
.tabPage{height:80px;}

文章标题:在HTML页面中实现一个简单的Tab-创新互联
转载注明:http://cdkjz.cn/article/ggcdc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220