<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
<script type="text/javascript">
function over(x){
if(x.className=="up"){
x.className="roll";
}
}
function out(x){
if(x.className=="roll"){
x.className="up";
}
}
function Click(xtd){//传过来的值是当前对象td
var grid=xtd.parentNode.getElementsByTagName("td");//3td，i=2，索引号必须要从0开始//获取tr下的所有td
var ct=document.getElementsByTagName("div");
for(var i=0;i<grid.length;i++){
if(xtd==grid[i]){
grid[i].className="down";
ct[i].className="dis";
}else{
grid[i].className="up";
ct[i].className="undis";
}
}
}
</script>
<style type="text/css">
body{
font-size: 12px;
}
img{width: 100px;
height: 100px;
}
a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
text-align: center;
outline: none;
color: #333;
font-weight: bold;
}
a:visited{color: #333;
}
#nav{
border: 1px solid #333;
border-bottom: none;
}
.down{background:url(web/down.jpg)repeat-x;}
.roll{background:url(web/roll.jpg)repeat-x;}
.roll a:hover{color: #fff;}
.up{background: url(web/up.jpg)repeat-x;}
.up a{color: #fff;}
.dis{display: block;}
.undis{display: none;}
.content{border: 1px solid #333;
border-top: none;
background:url(web/buttom.jpg)repeat-x bottom;
}
</style>
</head>
<body>
<!--
作者：2698231437@qq.com
时间：2018-10-23
描述：cellpadding:把表格单元边界与单元内容之间的间距设置为 0 像素.
cellspacing:表格单元格间距设置.
Click(this)//当前对象a
-->
<table width="300" align="center" cellpadding="0" cellspacing="1" id="nav">
<tr>
<td width="100" onmouseover="over(this);" onmouseout="out(this);" onclick="Click(this);" class="down">
<a href="#" hidefocus="true">IT资讯</a>
</td>
<td width="100" onmouseover="over(this);" onmouseout="out(this);" onclick="Click(this);" class="up">
<a href="#" hidefocus="true">剧情歌</a>
</td>
<td width="100" onmouseover="over(this);" onmouseout="out(this);" onclick="Click(this);" class="up">
<a href="#" hidefocus="true">广播剧</a>
</td>
</tr>
</table>
<div class="dis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td rowspan="3" width="50%" align="center">
<img src="web/a.jpg" border="1" />
</td>
<td>影响互联网未来的趋势</td>
</tr>
<tr>
<td>18年最火的it领域技术</td>
</tr>
<tr>
<td>有关如何成为it界大神</td>
</tr>
</table>
</div>
<div class="undis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td rowspan="3" width="50%" align="center">
<img src="web/b.jpg" border="1" />
</td>
<td>生死两茫茫</td>
</tr>
<tr>
<td>唱歌</td>
</tr>
<tr>
<td>吹笛</td>
</tr>
</table>
</div>
<div class="undis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0" class="content">
<tr>
<td rowspan="3" width="50%" align="center">
<img src="web/c.jpg" border="1" />
</td>
<td>还是你</td>
</tr>
<tr>
<td>飞儿</td>
</tr>
<tr>
<td>由不得你</td>
</tr>
</table>
</div>
</body>
</html>
没有美化效果的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab选项卡切换块</title>
<script type="text/javascript">
function Click(x){
var grid=x.parentNode.getElementsByTagName("td");
var ct=document.getElementsByTagName("div");//三个div
for(var i=0;i<grid.length;i++){//td=3,i=0<3
if(x==grid[i]){
grid[i].className="down";//td
ct[i].className="dis";//div
}else{
grid[i].className="up";//td为up
ct[i].className="undis";//div为undiv
}
}
}
</script>
<style type="text/css">
a{display: block;
width: 100%;
height: 100%;
text-decoration: none;/*CSS文字修饰为无；用于设置清除超链接的默认下划线*/
text-align: center;
outline: none;/*none 默认。定义无轮廓。当元素获得焦点的时候，焦点框为0。比如说当前这个网页，
你用tab键切换的时候，文字链接、搜索框、按钮等的外面会有一个虚线框（或高亮框），此时当前的元素就获得了焦点，你可以对它进行操作。*/
color: #333;
font-weight: bold;/*font-weight 属性设置文本的粗细。bold 定义粗体字符。*/
}
/*:visited 选择器用于选取已被访问的链接。*/
a:visited{
color: #333;
}
.down{background: #fff;}
.up{background: #333;}
.up a{color: #fff;}
.dis{display: block;}/*div默认就是块状元素，也可以声明一下*/
.undis{display: none;}
</style>
</head>
<body>
<!--
作者：2698231437@qq.com
时间：2018-10-23
描述：cellpadding 属性规定单元边沿与其内容之间的空白。
cellspacing 属性规定单元格之间的空间。
onFocus="this.blur()"会返回一个布尔值，相当于hidefocus="true"。此功能是使超链接不显示单机时周围的虚线。
-->
<table width="300" align="center" cellpadding="0" cellspacing="1">
<tr>
<td width="100" onclick="Click(this);" class="down"><a href="#" hidefocus="true">项目A</a></td>
<td width="100" onclick="Click(this);" class="up"><a href="#" hidefocus="true">项目B</a></td>
<td width="100" onclick="Click(this);" class="up"><a href="#" hidefocus="true">项目C</a></td>
</tr>
</table>
<div class="dis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>内容块A</td>
</tr>
</table>
</div>
<div class="undis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>内容块B</td>
</tr>
</table>
</div>
<div class="undis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>内容块C</td>
</tr>
</table>
</div>
</body>
</html>
网友评论