div+css+js选项卡

最新推荐文章于 2021-02-08 00:48:18 发布

bj_dxd

最新推荐文章于 2021-02-08 00:48:18 发布

阅读量162

点赞数

分类专栏： javascript 文章标签： html css javascript jquery ViewUI

本文链接：https://blog.csdn.net/bj_dxd/article/details/84095269

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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" οnclick="test('msearch_a')"/>
</div>
<div id="b1" class="unselect">
<img id="mtab_img2" src="jobs_tab.gif" alt="jobs" οnclick="test('msearch_b')"/>
</div>
<div id="c1" class="unselect">
<img id="mtab_img3" src="merchandise_tab.gif" alt="merchandise" οnclick="test('msearch_c')"/>
</div>
<div id="d1" class="unselect">
<img id="mtab_img4" src="personal_tab.gif" alt="personal" οnclick="test('msearch_d')"/>
</div>
<div id="e1" class="unselect">
<img id="mtab_img5" src="realestate_tab.gif" alt="real" οnclick="test('msearch_e')"/>
</div>
<div id="f1" class="unselect">
<img id="mtab_img6" src="services_tab.gif" alt="service" οnclick="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";

}