用纯CSS如何制作流行的TAB菜单?

html-css040

用纯CSS如何制作流行的TAB菜单?,第1张

Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大,不管哪种方法,必须要使用javascript调用。

<ul class="tabs">

<li>

<input type="radio" name="tabs" id="tab1" checked />

<label for="tab1">选项卡 1</label>

<div id="tab-content1" class="tab-content">

<p>选项卡内容 1</p>

</div>

</li>

<li>

<input type="radio" name="tabs" id="tab2" />

<label for="tab2">选项卡 2</label>

<div id="tab-content2" class="tab-content">

<p>选项卡内容 2</p>

</div>

</li>

</ul>

<span id="ContentArea"><html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>网页特效</title>

</head>

<style type="text/css">

#dNavBar{

background-color:#ffffff

}

#dNavBar li{

list-style-type:none

float:left

width:84px

height:28px

line-height:28px

font-size:12px

color:#FFFFFF

border:3px solid #ffffff

background-color:#86C2FF

text-align:center

display:block

cursor:pointer

}

#subMenu{

background-color:#0000FF

width:500px

border-left:3px solid #ffffff

border-right:3px solid #ffffff

height:29px

line-height:29px

color:#FFFFFF

font-size:12px

padding-left:10px

}

body {

margin-left: 0px

margin-top: 0px

margin-right: 0px

margin-bottom: 0px

}

a:link {

color: #FFFFFF

text-decoration: none

}

a:hover{

color: #FFFFFF

text-decoration: none

}

a:visited{

color: #FFFFFF

text-decoration: none

}

</style>

<script language="javascript">

function ShowMenu()

{

var barCTT=document.getElementById("dNavBar")

var liArr=barCTT.getElementsByTagName("li")

var links=new Array()

links[0]="<a href='#'>当前位置:首页"

links[1]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>"

links[2]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"

links[3]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>| <a href='#'>项目五</a>"

links[4]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[5]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"

links[6]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[7]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[8]="<a href='http://www.qpsh.com'>项目一</a>| <a href='#'>项目二</a>"

links[9]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[10]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[11]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[12]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

for (i=0i<liArr.lengthi++)

{

liArr[i].onclick=function()

{

selectThis(this,liArr,links)

}

}

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0

for (i=0i<allLi.lengthi++)

{

allLi[i].style.border="3px solid #ffffff"

allLi[i].style.backgroundColor="#86C2FF"

allLi[i].style.height="28px"

if (indexObj==allLi[i])

{

index=i

}

}

indexObj.style.borderBottom="0px solid #666688"

indexObj.style.backgroundColor="#0000FF"

indexObj.style.height="31px"

document.getElementById("subMenu").innerHTML=infoArr[index]

}

</script>

<body onLoad="ShowMenu()">

<div id="dNavBar" style="float:nonewidth:560px"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>

</div>

<div id="subMenu">站务公告</div>

</body>

</html>

</span>