div+css+js选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajscript.js"></script>
</head>
<body>
<div style=" height:26px" >
<div id="a1" class="unselect">
<img id="mtab_img1" src="auto_tab_hov.gif" alt="autos" onclick="test('msearch_a')"/>
</div>
<div id="b1" class="unselect">
<img id="mtab_img2" src="jobs_tab.gif" alt="jobs" onclick="test('msearch_b')"/>
</div>
<div id="c1" class="unselect">
<img id="mtab_img3" src="merchandise_tab.gif" alt="merchandise" onclick="test('msearch_c')"/>
</div>
<div id="d1" class="unselect">
<img id="mtab_img4" src="personal_tab.gif" alt="personal" onclick="test('msearch_d')"/>
</div>
<div id="e1" class="unselect">
<img id="mtab_img5" src="realestate_tab.gif" alt="real" onclick="test('msearch_e')"/>
</div>
<div id="f1" class="unselect">
<img id="mtab_img6" src="services_tab.gif" alt="service" onclick="test('msearch_f')"/>
</div>
</div>
<div>
<div id="msearch_a" class="main_search_bg" style="display:block">
<div class="top_left">
<fieldset>
<legend style="font-size:16px">基本信息</legend>
<form>
<p><label>姓名：</label>
<input id="aa1" type="text" name="name"/ >
<label style="margin-left:30px">性别：</label>
<label>男：</label>
<input type="radio" name="sex"/>
<label>女：</label>
<input type="radio" name="sex"/></p>
<p><label>年龄：</label>
<input type="text" name="age"/>
<label style="margin-left:30px">电话：</label>
<input type="text" name="tel"/></p>
<p>
<label>地址：</label>
<input type="text" name="add"/>
<label style="margin-left:30px">邮箱：</label>
<input type="text"/>
</p>
<p align="center"><input type="button" value="提交" /></p>
</form>
</fieldset>
</div>
</div>
<div id="msearch_b" class="main_search_bg" style="display:none;">
ss
</div>
<div id="msearch_c" class="main_search_bg" style="display:none;">
ddddd
</div>
<div id="msearch_d" class="main_search_bg" style="display:none;">
eee
</div>
<div id="msearch_e" class="main_search_bg" style="display:none;">
eeeeeeeeeeeeeeee
</div>
<div id="msearch_f" class="main_search_bg" style="display:none;">
gggggggggggg
</div>
</div>
</body>
</html>
css
.unselect{
float:left;
height:26px;
}
.main_search_bg{
border:1px solid #0b202c;
height:240px;
width:500px;
}
label{
font-size:14px;
}
.top_left{
width:470px;
margin-left:15px;
margin-top:20px;
}
js
function test(firstdiv_id)
{
document.getElementById("mtab_img1").src="images/auto_tab.gif";
document.getElementById("mtab_img2").src="images/jobs_tab.gif";
document.getElementById("mtab_img3").src="images/merchandise_tab.gif";
document.getElementById("mtab_img4").src="images/personal_tab.gif";
document.getElementById("mtab_img5").src="images/realestate_tab.gif";
document.getElementById("mtab_img6").src="images/services_tab.gif";
if(firstdiv_id=="msearch_a")
{
document.getElementById("mtab_img1").src="images/auto_tab_hov.gif";
}
else if(firstdiv_id=="msearch_b")
{
document.getElementById("mtab_img2").src="images/jobs_tab_hov.gif";
}
else if(firstdiv_id=="msearch_c")
{
document.getElementById("mtab_img3").src="images/merchandise_tab_hov.gif";
}
else if(firstdiv_id=="msearch_d")
{
document.getElementById("mtab_img4").src="images/personal_tab_hov.gif";
}
else if(firstdiv_id=="msearch_e")
{
document.getElementById("mtab_img5").src="images/realestate_tab_hov.gif";
}
else if(firstdiv_id=="msearch_f")
{
document.getElementById("mtab_img6").src="images/services_tab_hov.gif";
}
if(document.getElementById(firstdiv_id).style.display=="none")
{
var arr=["msearch_a","msearch_b","msearch_c","msearch_d","msearch_e","msearch_f"];
var i;
for(i=0;i<arr.length;i++)
{
document.getElementById(arr[i]).style.display="none";
}
fadein(firstdiv_id);
}
}
function fadein(rr)
{
$("#"+rr).fadeIn(500);
document.getElementById(rr).style.display="block";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajscript.js"></script>
</head>
<body>
<div style=" height:26px" >
<div id="a1" class="unselect">
<img id="mtab_img1" src="auto_tab_hov.gif" alt="autos" onclick="test('msearch_a')"/>
</div>
<div id="b1" class="unselect">
<img id="mtab_img2" src="jobs_tab.gif" alt="jobs" onclick="test('msearch_b')"/>
</div>
<div id="c1" class="unselect">
<img id="mtab_img3" src="merchandise_tab.gif" alt="merchandise" onclick="test('msearch_c')"/>
</div>
<div id="d1" class="unselect">
<img id="mtab_img4" src="personal_tab.gif" alt="personal" onclick="test('msearch_d')"/>
</div>
<div id="e1" class="unselect">
<img id="mtab_img5" src="realestate_tab.gif" alt="real" onclick="test('msearch_e')"/>
</div>
<div id="f1" class="unselect">
<img id="mtab_img6" src="services_tab.gif" alt="service" onclick="test('msearch_f')"/>
</div>
</div>
<div>
<div id="msearch_a" class="main_search_bg" style="display:block">
<div class="top_left">
<fieldset>
<legend style="font-size:16px">基本信息</legend>
<form>
<p><label>姓名：</label>
<input id="aa1" type="text" name="name"/ >
<label style="margin-left:30px">性别：</label>
<label>男：</label>
<input type="radio" name="sex"/>
<label>女：</label>
<input type="radio" name="sex"/></p>
<p><label>年龄：</label>
<input type="text" name="age"/>
<label style="margin-left:30px">电话：</label>
<input type="text" name="tel"/></p>
<p>
<label>地址：</label>
<input type="text" name="add"/>
<label style="margin-left:30px">邮箱：</label>
<input type="text"/>
</p>
<p align="center"><input type="button" value="提交" /></p>
</form>
</fieldset>
</div>
</div>
<div id="msearch_b" class="main_search_bg" style="display:none;">
ss
</div>
<div id="msearch_c" class="main_search_bg" style="display:none;">
ddddd
</div>
<div id="msearch_d" class="main_search_bg" style="display:none;">
eee
</div>
<div id="msearch_e" class="main_search_bg" style="display:none;">
eeeeeeeeeeeeeeee
</div>
<div id="msearch_f" class="main_search_bg" style="display:none;">
gggggggggggg
</div>
</div>
</body>
</html>
css
.unselect{
float:left;
height:26px;
}
.main_search_bg{
border:1px solid #0b202c;
height:240px;
width:500px;
}
label{
font-size:14px;
}
.top_left{
width:470px;
margin-left:15px;
margin-top:20px;
}
js
function test(firstdiv_id)
{
document.getElementById("mtab_img1").src="images/auto_tab.gif";
document.getElementById("mtab_img2").src="images/jobs_tab.gif";
document.getElementById("mtab_img3").src="images/merchandise_tab.gif";
document.getElementById("mtab_img4").src="images/personal_tab.gif";
document.getElementById("mtab_img5").src="images/realestate_tab.gif";
document.getElementById("mtab_img6").src="images/services_tab.gif";
if(firstdiv_id=="msearch_a")
{
document.getElementById("mtab_img1").src="images/auto_tab_hov.gif";
}
else if(firstdiv_id=="msearch_b")
{
document.getElementById("mtab_img2").src="images/jobs_tab_hov.gif";
}
else if(firstdiv_id=="msearch_c")
{
document.getElementById("mtab_img3").src="images/merchandise_tab_hov.gif";
}
else if(firstdiv_id=="msearch_d")
{
document.getElementById("mtab_img4").src="images/personal_tab_hov.gif";
}
else if(firstdiv_id=="msearch_e")
{
document.getElementById("mtab_img5").src="images/realestate_tab_hov.gif";
}
else if(firstdiv_id=="msearch_f")
{
document.getElementById("mtab_img6").src="images/services_tab_hov.gif";
}
if(document.getElementById(firstdiv_id).style.display=="none")
{
var arr=["msearch_a","msearch_b","msearch_c","msearch_d","msearch_e","msearch_f"];
var i;
for(i=0;i<arr.length;i++)
{
document.getElementById(arr[i]).style.display="none";
}
fadein(firstdiv_id);
}
}
function fadein(rr)
{
$("#"+rr).fadeIn(500);
document.getElementById(rr).style.display="block";
}