<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选项卡</title>
<style type="text/css">
body { font-family:verdana; width:696px;}
#content { float:left; width:696px; border:1px solid #ccc;margin:0;}
#nav { margin:0; padding:0; list-style: none; }
#nav{ margin:0; padding:0; float:left;font-size:12px;}
#nav table{margin-right:4px;}
#nav table a {
display:block;
text-decoration:none;
color: #0b6fa1;
}
#nav table a:hover {
font-weight:bold;
color:#0b6fa1;
}
#nav table a.selected {
font-weight:bold;
color:#0b6fa1;
}
#content div { display:none; }
#content div.on { display:block; }
.daday{float:right;}
</style>
<script type="text/javascript">
function applySelectedTo(link) {
var table = document.getElementsByTagName("table")[0]; // get the first ul tag on the page
var allLinks = table.getElementsByTagName("a"); // get all the links within that ul
for (var i=0; i<allLinks.length; i++) { // iterate through all those links
allLinks[i].className = ""; // and assign their class names to nothing
}
link.className = "selected"; // finally, assign class="selected" to our chosen link
var allDivs = document.getElementsByTagName("div");
for (var k=0; k<allDivs.length; k++) {
allDivs[k].className = "";
}
var lyricId = link.getAttribute("href").split("#")[1];
lyricId = document.getElementById(lyricId);
lyricId.className = "on";
}
</script>
</head>
<body>
<h1>测试tab选项卡</h1>
<table border="0" cellspacing="0" cellpadding="0" height="24" id="nav">
<tr><td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#all" class="selected">全部</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""/></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#kf">咖啡厅</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""/></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#jb" >酒吧</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#mr">美容美发</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""/></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#cg">茶馆</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif">
<a onMouseOver="applySelectedTo(this);return false;" href="#js">健身</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""/></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#ktv">KTV</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""/></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#gy" >公园</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#dy">电影院</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""/></td></tr></table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" height="24">
<tr><td><img src="images/left.gif" width="4" height="24" alt=""/></td>
<td background="images/meidd.gif"><a onMouseOver="applySelectedTo(this);return false;" href="#xy">洗浴足疗</a></td>
<td><img src="images/right.gif" width="4" height="24" alt=""/></td></tr></table>
</td>
</tr>
</table>
<div id="content">
<div class="on" id="all" style="height:600px;">
<h2>全部</h2>
</div>
<div id="kf" style="height:600px;">
<h2>咖啡厅</h2>
</div>
<div id="jb" style="height:600px;">
<h2>酒吧</h2>
</div>
<div id="mr" style="height:600px;">
<h2>美容美发</h2>
</div>
<div id="cg" style="height:600px;">
<h2>茶馆</h2>
</div>
<div id="js" style="height:600px;">
<h2>健身</h2>
</div>
<div id="ktv" style="height:600px;">
<h2>KTV</h2>
</div>
<div id="gy" style="height:600px;">
<h2>公园</h2>
</div>
<div id="dy" style="height:600px;">
<h2>电影院</h2>
</div>
<div id="xy" style="height:600px;">
<h2>洗浴足疗</h2>
</div>
</div>
</body>
</html>
扫一扫
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
