首先用css定义一个框架；
然后用div调用出来css定义的这个框架；
js是用来实现tab切换效果的。
可以百度搜索一下tab素材或者选项卡素材。
有很多相关素材的，
js和css可以写在当前页面，也可以分开调用；
一般分开来会比较好管理一些。
例：
<html>
<head>
<style>.tab{width:300px0height:100px}</style>
</head>
<body>
<div class="tab">内容</div>
<script>function{}</script>
</body>
</html>
需要再加上JS进入控制。具体代码如下，JS的功能就是用来修改CSS中的display属性。下面的代码只是做一些简单的原理演示，你可以跟据你自己的需要进行修改。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.tabnav ul{margin:0padding:0list-style:none}
.tabnav li{padding:5 10pxborder:1px solid redfloat:left}
.tabid {border:1px solid #000clear:both}
</style>
<script language='javascript'>
function tab(n){
var tabnav="tab"+n
var tabid="tabid"+n
cleardisplay()
document.getElementById(tabid).style.display="block"
}
function cleardisplay(){
for (i=1i<3i++)
{
var cleartabid="tabid"+i
document.getElementById(cleartabid).style.display="none"
}
}
</script>
</HEAD>
<BODY>
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='tab(1)'>TAB1</li>
<li id='tab2' onclick='tab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none'>tab2</div>
</div>
</BODY>
</HTML>
<!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 runat="server"> <title>使用JavaScript实现的tab</title> <style type="text/css"> /*设置超链接样式*/a{color: #5086a5 text-decoration: none font-size: 12px}a:hover{ color: #5086a5 text-decoration: underline font-size: 12px}a:visited{color: #5086a5 font-size: 12px }/*整个tab层居中，宽度为600px*/#tabDiv{width:600px margin:1em auto padding-bottom: 10px border-right: #b2c9d3 1px solid border-top: #b2c9d3 1px solid border-left: #b2c9d3 1px solid border-bottom: #b2c9d3 1px solid background: #ffffff}/*tab头的样式*/#tabsHead{ padding-left: 0pxheight: 26pxbackground-color: #e8f7fcfont-size: 1emmargin: 1px 0px 0pxcolor: #5086a5line-height: 26px}/*已选tab头（超链接）的样式*/.curtab{padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px border-right: #b2c9d3 1px solid font-weight: bold float: left cursor: pointer background: #ffffff } /*未选tab头（超链接）的样式*/.tabs{border-right: #c1d8e0 1px solid padding-top: 0px padding-right: 10px padding-bottom: 0px padding-left: 10px font-weight: normal float: left cursor: pointer }p{font-size:9pt margin-left:20pt }</style> <script language="javascript" type="text/jscript"> <!--//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）function showTab(tabHeadId,tabContentId){//tab层var tabDiv = document.getElementById("tabDiv") //将tab层中所有的内容层设为不可见//遍历tab层下的所有子节点var taContents = tabDiv.childNodes for(i=0i<taContents.lengthi++){//将所有内容层都设为不可见if(taContents[i].id!=null &&taContents[i].id != 'tabsHead'){taContents[i].style.display = 'none' }}//将要显示的层设为可见document.getElementById(tabContentId).style.display = 'block' //遍历tab头中所有的超链接var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a') for(i=0i<tabHeads.lengthi++){//将超链接的样式设为未选的tab头样式tabHeads[i].className='tabs' }//将当前超链接的样式设为已选tab头样式document.getElementById(tabHeadId).className='curtab' document.getElementById(tabHeadId).blur() }--> </script></head><body> <form id="form1" runat="server"> <!--tab控件--> <div id="tabDiv"><!--tab头--><div id="tabsHead"><a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗头凤</a><a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">卜算子·咏梅</a></div><div id="tabContent1" style="display:block">
