87,904
社区成员
发帖
与我相关
我的任务
分享100分奉上！！！求高手做出这个JS效果
http://bj.ganji.com/pub/pub_select.php
谁能帮忙做出赶集网这个页面的效果，只要中间部分的，头尾不用管，效果具体要求为：，一开始上面菜单项不能点，点任何一个按钮进入下级菜单，同时刚才那级菜单项可以点击，下方出现一返回按钮，要求5个页都要实现，第五页套个简单的注册页面就行，总之一句话赶集网这个页面的主体部分能实现的效果都要有，要求有全部代码可以直接运行，提示一下这页面直接查看源代码不能看得用DW之类的软件直接打开网址，哪位大侠能仗义出手小弟当牛做马万死难谢~~~~~~~不知道论坛能不能加分，如果能的话我一共200分全部奉上，救命啊~~~
谁能帮忙做出赶集网这个页面的效果，只要中间部分的，头尾不用管，效果具体要求为：，一开始上面菜单项不能点，点任何一个按钮进入下级菜单，同时刚才那级菜单项可以点击，下方出现一返回按钮，要求5个页都要实现，第五页套个简单的注册页面就行，总之一句话赶集网这个页面的主体部分能实现的效果都要有，要求有全部代码可以直接运行，提示一下这页面直接查看源代码不能看得用DW之类的软件直接打开网址，哪位大侠能仗义出手小弟当牛做马万死难谢~~~~~~~不知道论坛能不能加分，如果能的话我一共200分全部奉上，救命啊~~~
...全文
请发表友善的回复…
发表回复
sunxing007 2009-09-28
- 打赏
- 举报
[Quote=引用 11 楼 ft2618611 的回复:]
sunxing大师您好~还有个问题要请问您，就是您刚做的那个页面，赶集网的那个的第一层页面比如说分为房产和二手两个链接，但是这两个链接打开的第二层页面指向的是不一样的，不过第三四层都又都是一样的了，可不可以请您修改一下JS让第二个页面可以指向不同的分页面而后再回来，不然的话无法实现效果啊呵呵~，十分感谢您，晚上等待您答复
[/Quote]
我只是一个普通的ｄｅｖ
sunxing大师您好~还有个问题要请问您，就是您刚做的那个页面，赶集网的那个的第一层页面比如说分为房产和二手两个链接，但是这两个链接打开的第二层页面指向的是不一样的，不过第三四层都又都是一样的了，可不可以请您修改一下JS让第二个页面可以指向不同的分页面而后再回来，不然的话无法实现效果啊呵呵~，十分感谢您，晚上等待您答复
[/Quote]
我只是一个普通的ｄｅｖ
sunxing007 2009-09-28
- 打赏
- 举报
sunxing007 2009-09-28
- 打赏
- 举报
重新修改了一下。你要注意看我的注释，包括html中的注释和js方法的注释。按照注释来就可以了。
我发现这个程序可以很好的工作在ie6, ie8; ff3下也不太差.
我发现这个程序可以很好的工作在ie6, ie8; ff3下也不太差.
<html>
<head>
<title>感激网</title>
<style>
body{
font-size: 10pt;
}
#c{
border: solid red 0px;
background-color: #E4F0F8;
height: 250px;
width: 1000px;
padding-top: 5px;
}
#title{
height: 28px;
width: 100%;
border: solid blue 0px;
}
#title ul{
margin: 0px 0px 0 0;
list-style: none;
height: 100%;
}
.title_item_selected{
display: block;
float: left;
height: 100%;
margin: 0 10 0 0;
padding: 0;
background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;
}
.title_item{
display: block;
float: left;
height: 100%;
margin: 0 10 0 0;
padding: 0;
/*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;*/
}
.title_item_text_selected{
border: solid red 0px;
float: left;
text-decoration:none;
margin:0 0 0 6px;
padding:10 6 0 0px;
display: block;
height: 100%;
background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;
cursor: default;
}
.title_item_text{
border: solid red 0px;
float: left;
text-decoration:none;
margin:0 0 0 6px;
padding:10 6 0 0px;
display: block;
height: 100%;
/*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;*/
cursor: default;
}
#content{
height: auto;
width: 100%;
border: solid blue 0px;
}
#content .tb{
margin: 0 6px 6px 6px;
padding: 5px;
border: solid red 0px;
background-color: #fff;
height: 100%;
width: 100%;
}
#foot{
height: 40px;
width: 100%;
border: solid blue 0px;
}
</style>
</head>
<body onload="">
author: <a href="http://blog.csdn.net/sunxing007">blog.csdn.net/sunxing007</a> <br><br>
<div id='c'>
<div id='title'>
<ul id='myUL'>
<li style="margin-left: 3px;" class="title_item_selected"><a class="title_item_text_selected" href="#">选择信息类别</a></li>
<li class="title_item"><a class="title_item_text" href="#">选择信息子类别</a></li>
<li class="title_item"><a class="title_item_text" href="#">选择区域</a></li>
<li class="title_item"><a class="title_item_text" href="#">选择街道</a></li>
<li class="title_item"><a class="title_item_text" href="#">填写信息</a></li>
</ul>
</div>
<div id='content'>
<div class='tb'>
<!--下面的链接可以动态改变第二页的内容；
当点击房产的时候，动态的改变第二页的内容为房产相关的；
当点击汽车的时候，动态设置第二页内容为汽车相关-->
<!--里面用到了后面定义的javascript函数 setContent(content, page)-->
<!--特别需要注意的是双引号里面套着单引号，单引号里面又套着双引号，要注意用反斜杠转意-->
<a href="javascript: setContent('<a href=\'javascript:go(2);\'>租房</a><br><a href=\'javascript:go(2);\'>二手</a><br><a href=\'javascript:go(0);\'>返回</a><br>', 1); go(1)">房产</a><br>
<a href="javascript: setContent('<a href=\'javascript:go(2);\'>家用车</a><br><a href=\'javascript:go(2);\'>商务车</a><br><a href=\'javascript:go(0);\'>返回</a><br>', 1); go(1)">汽车</a><br>
</div>
<div class='tb'><a href="javascript: go(2);">租房</a><br>二手<br><a href="javascript: go(0);">返回</a> </div>
<div class='tb'><a href="javascript: go(3);">浦东</a><br>浦西<br><a href="javascript: go(1);">返回</a> </div>
<div class='tb'><a href="javascript: go(4);">张江高科</a><br>陆家嘴<br><a href="javascript: go(2);">返回</a> </div>
<div class='tb'>
姓名：<input type="text" /></br>
年龄：<input type="text" /></br>
户籍：<input type="text" /></br>
<a href="javascript: alert('your form will be submitted.');">提交</a>
<a href="javascript: go(3);">返回</a>
</div>
</div>
<div id='foot'></div>
</div>
<script>
//var currentPage = 0;
function $(id){return document.getElementById(id)};
var container = $('myUL');
var items = container.getElementsByTagName('li');
var links = container.getElementsByTagName('a');
var contents = $('content').getElementsByTagName('div');
//最主要的函数，参数page是要到达的页面。从0开始。
function go(page){
if(page<0 || page>4){
alert('invalid argument');
return;
}
for(var i=0; i<5; i++){
if(i==page){
items[i].className = 'title_item_selected';
links[i].className = 'title_item_text_selected'
contents[i].style.display = '';
links[i].style.cursor = 'default';
links[i].onclick = null;
}
else{
items[i].className = 'title_item';
links[i].className = 'title_item_text';
contents[i].style.display = 'none';
if(i<page){
links[i].onclick = function(){
var n = getPageIndex(this);
go(n);
}
links[i].style.cursor = 'hand';
}
else if(i>page){
links[i].onclick = null;
links[i].style.cursor = 'default';
}
}
}
//currentPage = page;
}
//辅助函数 得到被点击的选项卡的索引
function getPageIndex(node){
for(var i=0; i<5; i++){
if(node==links[i]){
return i;
}
}
}
/**
* 设置指定的选项卡的内容
* content是html字符串
* page是选项卡索引 0 <= page <= 4 ;
* 比如：设置第二页的内容为：<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a>
* 则这样调用即可： setContent("<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a>", 1);
**/
function setContent(content, page){
if(page<0 || page>4){
alert('invalid arguments');
return;
}
contents[page].innerHTML = content;
}
//初始化，显示第一页
go(0);
</script>
</body>
</html>
ft2618611 2009-09-28
- 打赏
- 举报
sunxing大师您好~还有个问题要请问您，就是您刚做的那个页面，赶集网的那个的第一层页面比如说分为房产和二手两个链接，但是这两个链接打开的第二层页面指向的是不一样的，不过第三四层都又都是一样的了，可不可以请您修改一下JS让第二个页面可以指向不同的分页面而后再回来，不然的话无法实现效果啊呵呵~，十分感谢您，晚上等待您答复
sunxing007 2009-09-28
- 打赏
- 举报
在公司因为没有作图工具，所以背景图我就用赶集网的那个。将就以下。在公司也只有ie6可以使用 ，所以没有考虑兼容性。
<html>
<head>
<title>感激网</title>
<style>
body{
font-size: 10pt;
}
#c{
border: solid red 0px;
background-color: #E4F0F8;
height: 250px;
width: 1000px;
padding-top: 5px;
}
#title{
height: 28px;
width: 100%;
border: solid blue 0px;
}
#title ul{
margin: 0px 0px 0 0;
list-style: none;
height: 100%;
}
.title_item_selected{
display: block;
float: left;
height: 100%;
margin: 0 10 0 0;
padding: 0;
background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;
}
.title_item{
display: block;
float: left;
height: 100%;
margin: 0 10 0 0;
padding: 0;
/*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;*/
}
.title_item_text_selected{
border: solid red 0px;
float: left;
text-decoration:none;
margin:0 0 0 6px;
padding:10 6 0 0px;
display: block;
height: 100%;
background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;
cursor: default;
}
.title_item_text{
border: solid red 0px;
float: left;
text-decoration:none;
margin:0 0 0 6px;
padding:10 6 0 0px;
display: block;
height: 100%;
/*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;*/
cursor: default;
}
#content{
height: auto;
width: 100%;
border: solid blue 0px;
}
#content .tb{
margin: 0 6px 6px 6px;
padding: 5px;
border: solid red 0px;
background-color: #fff;
height: 100%;
width: 100%;
}
#foot{
height: 40px;
width: 100%;
border: solid blue 0px;
}
</style>
</head>
<body onload="">
<a href="http://blog.csdn.net/sunxing007">blog.csdn.net/sunxing007</a> <br><br>
<div id='c'>
<div id='title'>
<ul id='myUL'>
<li style="margin-left: 3px;" class="title_item_selected"><a class="title_item_text_selected" href="#">选择信息类别</a></li>
<li class="title_item"><a class="title_item_text" href="#">选择信息子类别</a></li>
<li class="title_item"><a class="title_item_text" href="#">选择区域</a></li>
<li class="title_item"><a class="title_item_text" href="#">选择街道</a></li>
<li class="title_item"><a class="title_item_text" href="#">填写信息</a></li>
</ul>
</div>
<div id='content'>
<div class='tb'><a href="javascript: go(1);">房产</a><br>汽车<br></div>
<div class='tb'><a href="javascript: go(2);">租房</a><br>二手<br><a href="javascript: go(0);">返回</a> </div>
<div class='tb'><a href="javascript: go(3);">浦东</a><br>浦西<br><a href="javascript: go(1);">返回</a> </div>
<div class='tb'><a href="javascript: go(4);">张江高科</a><br>陆家嘴<br><a href="javascript: go(2);">返回</a> </div>
<div class='tb'>
姓名：<input type="text" /></br>
年龄：<input type="text" /></br>
户籍：<input type="text" /></br>
<a href="javascript: alert('your form will be submitted.');">提交</a>
<a href="javascript: go(3);">返回</a> </div>
</div>
<div id='foot'></div>
</div>
<script>
//var currentPage = 0;
function $(id){return document.getElementById(id)};
var container = $('myUL');
var items = container.getElementsByTagName('li');
var links = container.getElementsByTagName('a');
var contents = $('content').getElementsByTagName('div');
//最主要的函数，参数page是要到达的页面。从0开始。
function go(page){
if(page<0 || page>4){
alert('invalid argument');
return;
}
for(var i=0; i<5; i++){
if(i==page){
items[i].className = 'title_item_selected';
links[i].className = 'title_item_text_selected'
contents[i].style.display = '';
links[i].style.cursor = 'default';
links[i].onclick = null;
}
else{
items[i].className = 'title_item';
links[i].className = 'title_item_text';
contents[i].style.display = 'none';
if(i<page){
links[i].onclick = function(){
var n = getPageIndex(this);
go(n);
}
links[i].style.cursor = 'hand';
}
else if(i>page){
links[i].onclick = null;
links[i].style.cursor = 'default';
}
}
}
//currentPage = page;
}
function getPageIndex(node){
for(var i=0; i<5; i++){
if(node==links[i]){
return i;
}
}
}
//初始化，显示第一页
go(0);
</script>
</body>
</html>
sunxing007 2009-09-28
- 打赏
- 举报
在公司因为没有作图工具，所以背景图我就用赶集网的那个。将就以下。在公司也只有ie6可以使用 ，所以没有考虑兼容性。
ft2618611 2009-09-28
- 打赏
- 举报
大哥~从早上等你都等了一天了~怎么还不出现啊~
sunxing007 2009-09-27
- 打赏
- 举报
今天先睡觉，明天要还是没人给你做，我来做。
dfzx 2009-09-27
- 打赏
- 举报
用jqury控制下样式就可以了
rjzou2006 2009-09-27
- 打赏
- 举报
一个选项卡了。
edielei 2009-09-27
- 打赏
- 举报
不太明白你的意思。
avengercf 2009-09-27
- 打赏
- 举报
给你个思路吧，类似效果，不知道他的实现
分析URL赶集的也是。固定格式，然后动态给菜单加链接就OK这个可以用JS事先也可以服务器端实现
很简单的功能
分析URL赶集的也是。固定格式，然后动态给菜单加链接就OK这个可以用JS事先也可以服务器端实现
很简单的功能
shizibeer 2009-09-27
- 打赏
- 举报
123
wzwen 2009-09-27
- 打赏
- 举报
滑动门的变种？
