<!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";
}
分享到:
相关推荐
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中,我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素,它帮助用户在有限的空间内组织和展示多个...
**文件名“DIV表格+JS选项卡”** 这个文件名可能包含了一个使用`<div>`元素和JavaScript实现的选项卡示例,其中“表格”可能是指使用表格布局或者与表格数据相关的选项卡内容。JavaScript通常用于处理用户的交互...
通过这个简单的例子,我们可以看到`DIV+CSS+JavaScript`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用,随着技术的发展,还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...
这里的CSS主要设置了`div`元素的布局和样式,例如,`display: flex`用于创建弹性布局,`cursor: pointer`让选项卡标题具有鼠标悬停效果,`border-bottom: none`移除选中选项卡的下划线,`display: none/block`控制...
javascript+div+css通用的页面选项卡效果
在本实例中,我们利用`div`、`css`以及`js`来创建一个功能完善的选项卡组件。下面将详细介绍这三个方面的知识。 1. **HTML Div元素** `div`(division)是HTML中的一个块级元素,常被用作容器,用来组合其他HTML...
在本资源包中,"网页模板设计效果图(DIV+CSS 百度有啊JS兼容超强选项卡滑动门封装类库)" 提供了一个具体的设计实例,展示了如何利用现代网页技术来实现一个功能强大的网站界面。以下将详细介绍其中的关键知识点: 1...
js+div+css选项卡,可运行html看效果
【标题】:基于Div+CSS实现的多选项卡技术详解 在网页设计中,多选项卡是一种常见的布局方式,它能够有效地组织和展示大量信息,提高用户体验。"div+css 多选项卡"指的是利用HTML的div元素和CSS样式来构建这种功能...
本项目结合jQuery、div和CSS实现了一个兼容IE6、7、8以及Firefox的选项卡列表样式,适用于新闻文章和图片发布类网站。 首先,让我们深入理解每个部分的作用: 1. **jQuery**:jQuery 提供了一组强大的 API,使得...
在网页设计中,"Div+Css的Tab菜单"是一种常见的交互式导航元素,它通过将多个页面或内容区域组织在一组选项卡下,为用户提供简洁且直观的浏览体验。Div(层)是HTML中的一个布局容器,而CSS(层叠样式表)则用于控制...
标题提及的"20多个不错的系统页面模板(Div+CSS+图片)"正是这样一套资源集合,它包含了用于构建高效、响应式和视觉吸引人的网页所需的各种元素。 Div+CSS是一种常见的网页布局技术,Div(Division)是HTML中的一个...
仿网易div+css滑动门选项卡效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
【标题】:“div+css制作Tab选项卡” 【描述】:本文将介绍如何使用HTML的div元素和CSS来创建Tab选项卡,适用于PHP网站的建设。我们将通过Dreamweaver或直接编写代码的方式,逐步解析Tab选项卡的实现过程。 【标签...
本文将深入探讨如何使用JavaScript、CSS和DIV来实现一个功能完善的选项卡组件,其中包括横排和竖排两种布局方式。这个组件不仅能够提升用户体验,还能使页面布局更加整洁有序。 首先,我们来看CSS部分。CSS...
我们可以为每个选项卡和内容区域创建单独的`div`,然后通过CSS控制它们的样式和显示状态。 CSS在构建选项卡式布局中扮演着核心角色。我们可以利用CSS选择器来选中并应用样式到特定的`div`元素,如设置背景颜色、...
例如,可以使用`<ul>`和`<li>`元素创建选项卡,而下拉内容则可以封装在`<div>`中,通过`data-*`自定义属性关联选项卡与对应内容。这样,当用户点击某个选项卡时,jQuery可以通过读取这些属性找到相应的下拉内容。 ...
在创建选项卡时,通常会为每个选项卡和对应的内容区域创建一个`div`,并通过CSS来定义它们的显示方式和位置。CSS(层叠样式表)则用于定义这些`div`的样式,包括颜色、大小、位置等,以及如何在选项卡切换时隐藏和...
接下来是CSS部分,主要用于设置选项卡和内容区域的样式,以及隐藏非活动的内容块。例如: ```css .tabs { list-style: none; margin: 0; padding: 0; } .tabs li { display: inline-block; } .tabs a { ...