创建51job风格的地区选择功能

需积分: 3 167 浏览量更新于2024-12-30 收藏 54KB DOC 举报

"实现类似51job地区选择效果" 在网页设计中，提供用户友好的地区选择功能是一项重要的任务，可以提升用户体验。本示例旨在实现一个与51job网站类似的地区选择效果，使得用户能够方便地筛选和定位他们感兴趣的工作区域。下面将详细介绍如何实现这一功能。首先，我们需要一个HTML结构来承载这个地区选择组件。在提供的代码片段中，可以看到`<HTML>`、`<HEAD>`和`<BODY>`等基本HTML元素，以及一个`<STYLE>`标签用于定义CSS样式。页面的主要部分被包含在一个`<div id="main">`内，这是地区选择组件的基础容器。接着，我们关注到类名为`.bton`的样式，这通常是按钮的样式设定，包括边框、背景色等。这样的设定使得用户在点击时有明显的视觉反馈。另一个类名为`.cont`的样式可能用于设置内部容器的填充，以提供一定的空间感。 `<div id="selectItem">`是地区选择器的主体部分，它具有绝对定位（`POSITION:absolute`），并设置了一定的边界和背景色，确保了在页面中的正确显示。`OVERFLOW:hidden`属性防止内容溢出，而`Z-INDEX:2`则确保了选择器在其他元素之上。`#preview`则是预览或选定区域的样式，通常会显示用户当前选择的地区。地区选择功能通常涉及到下拉菜单或多级联动选择。在51job的案例中，用户可能先选择省份，然后根据省份选择城市，最后可能还有更细致的区县选择。为了实现这样的功能，我们可以使用JavaScript（例如jQuery）或者现代的Web组件技术（如Vue或React）。 1. 使用JavaScript： - 创建多个嵌套的`<select>`元素，分别对应省份、城市和区县。 - 通过监听`onchange`事件，当用户在上一级选择时，动态更新下一级的选择项。 - 为每个选择项添加相应的样式，使用户在交互时有良好的视觉反馈。 2. 使用Vue或React： - 创建组件状态，如province、city和district，并绑定到视图上。 - 在组件方法中处理选择事件，根据当前选择更新可选项。 - 利用Vue的v-model或React的状态管理机制，同步用户的选择到组件状态。此外，为了实现更优雅的交互效果，可以考虑使用AJAX动态加载数据，这样在用户滚动选择项时，只加载可视区域内的内容，提高页面性能。总结起来，实现类似51job地区选择效果的关键在于：合理规划HTML结构，定义清晰的CSS样式，以及使用JavaScript或现代前端框架处理用户交互和数据更新。这样的功能设计不仅提供了良好的用户体验，也易于维护和扩展。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HEAD>

<TITLE>类似中华英才网，51job 的地区选择效果</TITLE>

BODY { FONT-SIZE: 12px; PADDING-TOP: 50px }

H2 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px;

PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px }

.bton { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND:

#ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid }

.cont { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px;

PADDING-TOP: 10px }

#main { MARGIN: 0px auto; WIDTH: 400px }

#selectItem { BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-

TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000

1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px

}

#preview { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px;

BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid }

#result { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP:

10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid }

.tit { PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px }

.bgc_ccc { BACKGROUND: #ccc }

.bgc_eee { BACKGROUND: #eee }

.c_999 { COLOR: #999 }

.pointer { CURSOR: pointer }

.left { FLOAT: left }

.right { FLOAT: right }

.cls { CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; HEIGHT: 0px }

#bg { DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT:

0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7 }

.hidden { DISPLAY: none }

.move { CURSOR: move }

</STYLE>

</HEAD>

<BODY>

<INPUT class="bton pointer" onclick=openBg(1);openSelect(1) type=button value= 请选择

name=button>

下载后可阅读完整内容，剩余6页未读，立即下载

yanshicheng

粉丝: 0
资源: 6

创建51job风格的地区选择功能

仿51job选择

仿51job选择地区、选择行业、选择职位效果

类似51job上的地区选择效果

JS实现类似51job上的地区选择效果示例

类似51job上的地区选择效果.rar

仿51job的多地区选择效果

JS实现51job地区选择特效的代码示例

创建一个类似51JOB的地区与行业选择弹窗

仿51job选择地区、行业、职位的效果

仿51job仿智联选择地区城市选择行业职位弹出效果代码

最新资源