html制作选项卡

来源：互联网发布：c语言算术表达式求值编辑：程序博客网时间：2024/05/18 08:16

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table选项卡</title>
<style type="text/css">
ul#tabNav {
width: 400px;
list-style: none;
border-bottom: solid 1px green;
margin: 0;
padding-left: 0;
padding-bottom: 0;
*padding-bottom: 0;
}

ul#tabNav li {
float: left;
height: 25px;
margin: 0 10px -2px 0;  backgroud-color: Green;
color: black;
border: solid 1px Green;
border-bottom: 0;
padding: 0;
}

ul # tabNav a:link, ul#tabNav a:visited {
display: block;
text-decoration: none;
padding: 5px 10px 3px 10px;
}

#tabContent {
width: 400px;
height: 200px;
border: solid 1px green;
border-top-width: 0;
}

#tabNav li.tabSelected {
background-color: #FFCC00;
color: #FFFFFF;
}
</style>

<script type="text/javascript">
function showContent(index){

var e=document.getElementById("content"+index);
e.style.display="";
for(var i=1;i<4;i++){

if(i!=index){
var e2=document.getElementById("content"+i);
e2.style.display="none";
document.getElementById("tab"+i).className="";
}

else{
document.getElementById("tab"+i).className="tabSelected";
}
}
}
</script>
</head>
<body>
<ul id="tabNav">
<li onmousedown="showContent(1)" id='tab1' class="tabSelected"><a
href='#' _fcksavedurl='#'>新聞</a></li>

<li onmousedown="showContent(2)" id='tab2' class=""><a href='#'
_fcksavedurl='#'>体育</a></li>

<li onmousedown="showContent(3)" id='tab3' class=""><a href='#'
_fcksavedurl='#'>娱乐</a></li>
</ul>
<div id="tabContent">
<div id="content1">新闻内容</div>
<div id="content2">体育内容</div>
<div id="content3">娱乐内容</div>
</div>
</body>
</html>

0 0