div+css+js选项卡

bj_dxd

浏览: 24645 次
性别:
来自: 北京

最近访客更多访客>>

h416373073

liaoze

eandy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

html css javascript jquery

<!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";

}

分享到：