`
bj_dxd
  • 浏览: 24639 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

}

分享到:
评论

相关推荐

    ASP.NET源码——网页选项卡(div+CSS).zip

    在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中,我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素,它帮助用户在有限的空间内组织和展示多个...

    DIV+CSS选项卡

    **文件名“DIV表格+JS选项卡”** 这个文件名可能包含了一个使用`&lt;div&gt;`元素和JavaScript实现的选项卡示例,其中“表格”可能是指使用表格布局或者与表格数据相关的选项卡内容。JavaScript通常用于处理用户的交互...

    DIV+CSS+JavaScript实现tab切换的选项卡

    通过这个简单的例子,我们可以看到`DIV+CSS+JavaScript`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用,随着技术的发展,还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...

    用div+css实现选项卡效果(适用于任何浏览器)

    这里的CSS主要设置了`div`元素的布局和样式,例如,`display: flex`用于创建弹性布局,`cursor: pointer`让选项卡标题具有鼠标悬停效果,`border-bottom: none`移除选中选项卡的下划线,`display: none/block`控制...

    javascript+div+css通用的页面选项卡i效果

    javascript+div+css通用的页面选项卡效果

    div+css实现选项卡

    在本实例中,我们利用`div`、`css`以及`js`来创建一个功能完善的选项卡组件。下面将详细介绍这三个方面的知识。 1. **HTML Div元素** `div`(division)是HTML中的一个块级元素,常被用作容器,用来组合其他HTML...

    网页模板设计效果图(DIV+CSS 百度有啊JS兼容超强选项卡滑动门封装类库)

    在本资源包中,"网页模板设计效果图(DIV+CSS 百度有啊JS兼容超强选项卡滑动门封装类库)" 提供了一个具体的设计实例,展示了如何利用现代网页技术来实现一个功能强大的网站界面。以下将详细介绍其中的关键知识点: 1...

    js+div+css选项卡

    js+div+css选项卡,可运行html看效果

    div+css 多选项卡

    【标题】:基于Div+CSS实现的多选项卡技术详解 在网页设计中,多选项卡是一种常见的布局方式,它能够有效地组织和展示大量信息,提高用户体验。"div+css 多选项卡"指的是利用HTML的div元素和CSS样式来构建这种功能...

    jQuery+div+css选项卡列表样式

    本项目结合jQuery、div和CSS实现了一个兼容IE6、7、8以及Firefox的选项卡列表样式,适用于新闻文章和图片发布类网站。 首先,让我们深入理解每个部分的作用: 1. **jQuery**:jQuery 提供了一组强大的 API,使得...

    Div+Css的Tab菜单

    在网页设计中,"Div+Css的Tab菜单"是一种常见的交互式导航元素,它通过将多个页面或内容区域组织在一组选项卡下,为用户提供简洁且直观的浏览体验。Div(层)是HTML中的一个布局容器,而CSS(层叠样式表)则用于控制...

    20多个不错的系统页面模板(Div+CSS+图片)

    标题提及的"20多个不错的系统页面模板(Div+CSS+图片)"正是这样一套资源集合,它包含了用于构建高效、响应式和视觉吸引人的网页所需的各种元素。 Div+CSS是一种常见的网页布局技术,Div(Division)是HTML中的一个...

    仿网易div+css滑动门选项卡效果

    仿网易div+css滑动门选项卡效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    div+css制作Tab选项卡.docx

    【标题】:“div+css制作Tab选项卡” 【描述】:本文将介绍如何使用HTML的div元素和CSS来创建Tab选项卡,适用于PHP网站的建设。我们将通过Dreamweaver或直接编写代码的方式,逐步解析Tab选项卡的实现过程。 【标签...

    JS+CSS+DIV实现选项卡(图片为背景)

    本文将深入探讨如何使用JavaScript、CSS和DIV来实现一个功能完善的选项卡组件,其中包括横排和竖排两种布局方式。这个组件不仅能够提升用户体验,还能使页面布局更加整洁有序。 首先,我们来看CSS部分。CSS...

    网页选项卡(div+CSS).

    我们可以为每个选项卡和内容区域创建单独的`div`,然后通过CSS控制它们的样式和显示状态。 CSS在构建选项卡式布局中扮演着核心角色。我们可以利用CSS选择器来选中并应用样式到特定的`div`元素,如设置背景颜色、...

    jq+css3下拉滑动选项卡 jquery+css3下拉滑动选项卡.zip

    例如,可以使用`&lt;ul&gt;`和`&lt;li&gt;`元素创建选项卡,而下拉内容则可以封装在`&lt;div&gt;`中,通过`data-*`自定义属性关联选项卡与对应内容。这样,当用户点击某个选项卡时,jQuery可以通过读取这些属性找到相应的下拉内容。 ...

    ASP.NET-[其他类别]网页选项卡(div+CSS)v1.0.zip

    在创建选项卡时,通常会为每个选项卡和对应的内容区域创建一个`div`,并通过CSS来定义它们的显示方式和位置。CSS(层叠样式表)则用于定义这些`div`的样式,包括颜色、大小、位置等,以及如何在选项卡切换时隐藏和...

    HTML+CSS实现的滑动门选项卡

    接下来是CSS部分,主要用于设置选项卡和内容区域的样式,以及隐藏非活动的内容块。例如: ```css .tabs { list-style: none; margin: 0; padding: 0; } .tabs li { display: inline-block; } .tabs a { ...

Global site tag (gtag.js) - Google Analytics