<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个TAB页的简单JS实现</title>
<style type="text/css">
#div0{
width:300px;
margin:0 auto;
}
#div1{
border:1px solid blue;
border-bottom:0px solid blue;
float:left;
}
#div2{
border-right:1px solid blue;
border-top:1px solid blue;
float:left;
}
#div3{
border:1px solid blue;
clear:left;
}
#div4{
border:1px solid blue;
clear:left;
}
</style>
<script language="javascript">
window.οnlοad=function(){
document.getElementById("div1").style.backgroundColor="yellow";
document.getElementById("div4").style.display="none";
}
function foo(){
document.getElementById("div1").style.backgroundColor="yellow";
document.getElementById("div2").style.backgroundColor="";
document.getElementById("div3").style.display="none";
document.getElementById("div4").style.display="block";
}
function bar(){
document.getElementById("div1").style.backgroundColor="";
document.getElementById("div2").style.backgroundColor="yellow";
document.getElementById("div3").style.display="block";
document.getElementById("div4").style.display="none";
}
</script>
</head>
<body>
<div id="div0">
<div id="div1" οnmοuseοver="foo()">标题一</div>
<div id="div2" οnmοuseοver="bar()">标题二</div>
<div id="div3">内容一</div>
<div id="div4">内容二</div>
</div>
</body>
</html>
http://www.w3.org/TR/html4/loose.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个TAB页的简单JS实现</title>
<style type="text/css">
#div0{
width:300px;
margin:0 auto;
}
#div1{
border:1px solid blue;
border-bottom:0px solid blue;
float:left;
}
#div2{
border-right:1px solid blue;
border-top:1px solid blue;
float:left;
}
#div3{
border:1px solid blue;
clear:left;
}
#div4{
border:1px solid blue;
clear:left;
}
</style>
<script language="javascript">
window.οnlοad=function(){
document.getElementById("div1").style.backgroundColor="yellow";
document.getElementById("div4").style.display="none";
}
function foo(){
document.getElementById("div1").style.backgroundColor="yellow";
document.getElementById("div2").style.backgroundColor="";
document.getElementById("div3").style.display="none";
document.getElementById("div4").style.display="block";
}
function bar(){
document.getElementById("div1").style.backgroundColor="";
document.getElementById("div2").style.backgroundColor="yellow";
document.getElementById("div3").style.display="block";
document.getElementById("div4").style.display="none";
}
</script>
</head>
<body>
<div id="div0">
<div id="div1" οnmοuseοver="foo()">标题一</div>
<div id="div2" οnmοuseοver="bar()">标题二</div>
<div id="div3">内容一</div>
<div id="div4">内容二</div>
</div>
</body>
</html>
====================使用jquery实现======================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tab效果</title>
<style>
.tab1{ width:100px; height:100px; border:1px solid red;}
ul.tabs_ul{ width:300px; float:left;}
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function ()
{
$("div.tab1").eq(0).show().siblings("div.tab1").hide();
$("ul.tabs_ul>li").click( function () {
var i = $(this).index();
$("div.tab1").eq(i).show().siblings("div.tab1").hide();
})
});
</script>
</head>
<body>
<ul class="tabs_ul">
<li><a href="#">信息意识</a></li>
<li><a href="#">信息技能</a></li>
<li><a href="#">信息道德</a></li>
<li><a href="#">信息评价</a></li>
<li><a href="#">综合</a></li>
</ul>
<div class="tab1"> 这是第1个 </div>
<div class="tab1"> 这是第2个 </div>
<div class="tab1"> 这是第3个 </div>
<div class="tab1"> 这是第4个 </div>
<div class="tab1"> 这是第5个 </div>
</body>
</html>
http://www.w3.org/TR/html4/loose.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tab效果</title>
<style>
.tab1{ width:100px; height:100px; border:1px solid red;}
ul.tabs_ul{ width:300px; float:left;}
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function ()
{
$("div.tab1").eq(0).show().siblings("div.tab1").hide();
$("ul.tabs_ul>li").click( function () {
var i = $(this).index();
$("div.tab1").eq(i).show().siblings("div.tab1").hide();
})
});
</script>
</head>
<body>
<ul class="tabs_ul">
<li><a href="#">信息意识</a></li>
<li><a href="#">信息技能</a></li>
<li><a href="#">信息道德</a></li>
<li><a href="#">信息评价</a></li>
<li><a href="#">综合</a></li>
</ul>
<div class="tab1"> 这是第1个 </div>
<div class="tab1"> 这是第2个 </div>
<div class="tab1"> 这是第3个 </div>
<div class="tab1"> 这是第4个 </div>
<div class="tab1"> 这是第5个 </div>
</body>
</html>