发个求助帖，网页制作高手请抬手指点！

某甲

页面构成如上图所示。

我想要实现的功能1：右侧项目1-5按钮，每个项目里都包含很多图片，要实现点击“项目1”之后，粉色区域变成项目1的专区，然后通过左下角的小缩略图按钮来实现项目1里的图片切换；点项目2则显示项目2的，以此类推；

我想要实现的功能2：左下方的小按钮为当前项目所有图片的浮动缩略图按钮，点缩略图显示大图片；(此项已解决)

我想要实现的功能3：点击蓝色区域里的链接1-4后，中间粉色和黄色区域消失，整个区域被链接1-4的页面替换。

难点1：不可以用frameset来分割整个页面，因为一是frameset网站加载速度较慢，主要还因为当把浏览器框拉小以后，每个frame页面里都会出现滚动条，不美观；

难点2：不可以使用flash，因为flash网站在iphone/ipad上无法显示；

我在这里求助不是想各位高手教我如何做网页，css、js、jquery我都会懂一些。现在被困在功能1和功能3，在这里只想请大家给个思路，在不使用frameset的情况下该怎样实现在同一页面内跳转。


十二分的谢意！！

forgetname

老师快来， 这里有人要报名上课了

zctr

功能1：点击右侧项目1按钮可以在粉色区域显示出项目1的图片，点项目2则显示项目2的，以此类推；
如果只是显示图片的话，不是可以改变图片的src就可以了吗？比方说，左边图片叫做<img id=main_show src=project_1.jpg> 而项目2的按钮叫<input type=button onclick=function(){document.getElementById('mian_show').src=project_2.jpg}>
大概这个意思

某甲

zctr 发表于 10-9-2013 09:36
功能1：点击右侧项目1按钮可以在粉色区域显示出项目1的图片，点项目2则显示项目2的，以此类推；
如果只是显 ...

先感谢回复。

问题没有这样简单，因为项目1-5，每个项目里都包含很多图片，所以我要实现的功能就是点击“项目1”之后，整个粉色区域就变成项目1的专区，然后通过左下角的小缩略图按钮来实现项目1里的图片切换。 其实如果将问题简化的话，就是如何用jquery添加超链接，实现在相同页面里跳转显示内容。

zctr

功能3：点击蓝色区域里的链接1-4后，中间粉色和黄色区域消失，整个区域被链接1-4的页面替换。
这个如果不用iframe的话，你只能用innerHTML来换了。也就是说，你需要把链接1-4的页面写到js里面去。

某甲

zctr 发表于 10-9-2013 10:09
功能3：点击蓝色区域里的链接1-4后，中间粉色和黄色区域消失，整个区域被链接1-4的页面替换。
这个如果不用 ...

功能3 的问题还没那么要紧，因为实在不行大不了就直接加超链接让整个页面跳转好了。

但是功能1实在是头痛啊。。。

zctr

某甲 发表于 10-9-2013 09:48
先感谢回复。

问题没有这样简单，因为项目1-5，每个项目里都包含很多图片，所以我要实现的功能就是点击 ...

那样肯定很漂亮，但很不容易做到。我不会。

某甲

zctr 发表于 10-9-2013 10:24
那样肯定很漂亮，但很不容易做到。我不会。

还是很感谢！

zctr

我是能说一下我的思路：
做单个的项目展示应该不难。我想应该是先定义一个div ， 比如项目1叫 <div id=project_1>，然后在这个div里面放要展示的内容。

那么，如果是多个项目，你可以写几个div，然后设置它们的位置相同，但是预先设置其他的div的属性visibility是hidden。
那么，对于右边的按钮，给他们加上事件驱动：
document.getElementById("project_1").style.visibility="hidden";//隐藏

document.getElementById("project_1").style.visibility="visible";//显示
来控制显示隐藏。

某甲

zctr 发表于 10-9-2013 10:49
我是能说一下我的思路：
做单个的项目展示应该不难。我想应该是先定义一个div ， 比如项目1叫 ，然后在这个 ...

这个方法我之前想过，但事实上需要做的项目远不止5个这么少，是几十个项目，如果都用div来控制，那不是要做一个很长很长的html?