html div选项卡模板,JS+DIV+CSS排版布局实现美观的选项卡效果

本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下：

这是一个基于JavaScript的简单选项卡代码，陪新手练习一下Div+CSS排版的技巧，本选项卡可以继续美化修饰完善，选项卡在目前在众多网站上应用广泛，确实是一个很不错的网页布局方法。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DIV CSS排版

function test_item(n){

var menu = document.getElementById("menu");

var menuli = menu.getElementsByTagName("li");

for(var i = 0; i< menuli.length;i++){

menuli[i].className= "";

menuli[n].className="yes";

document.getElementById("test"+ i).className = "no";

document.getElementById("test"+ n).className = "content";

}

}

• 首页
• 连接一
• 连接二
• 连接三
• 连接四

首页内容

连接一内容

连接二内容

连接三内容

连接四内容

希望本文所述对大家的JavaScript程序设计有所帮助。