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

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

HTML页面代码如下：

创新互联建站专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管，支持按月付款！我们的承诺：贵族品质、平民价格，机房位于中国电信/网通/移动机房，绵阳电信机房机柜租用服务有保障！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Tab页切换</title><scriptsrc="javascript/JScript.js" type="text/javascript"></script><linkhref="css/css.css" rel="stylesheet" type="text/css" /></head><body><tableclass="tabTitlesContainer"><trid="tabTitles"><tdclass="tabTitleSelected" onclick="tabPageControl(0)">DIV</td><tdclass="tabTitleUnSelected" onclick="tabPageControl(1)">CSS</td><tdclass="tabTitleUnSelected" onclick="tabPageControl(2)">JavaScript</td></tr></table><tableid="tabPagesContainer"><tbodyclass="tabPageSelected"><trclass="tabPage"><td>HTML的DIV控件是其他控件的容器。当要以编程方式生成控件、隐藏/显示一组控件或本地化一组控件时，该控件尤其有用。</td></tr></tbody><tbodyclass="tabPageUnSelected"><trclass="tabPage"><td>级联样式表 (CSS) 包含应用于网页中的元素的样式规则。这些样式定义元素的显示方式以及元素在页面中的放置位置</a></td></tr></tbody><tbodyclass="tabPageUnSelected"><trclass="tabPage"><td>Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。</td></tr></tbody></table></body></html>

简单的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-创新互联
URL链接：https://www.cdcxhl.com/article12/ggcdc.html

成都网站建设公司_创新互联，为您提供定制网站、Google、小程序开发、App开发、ChatGPT、动态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容