您的位置：首页 > Web前端 > HTML

html制作选项卡

2015-08-23 23:26 429 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航