作者starjou (周星星)
看板Web_Design
标题Re: [问题] 更换图层页面
时间Mon Nov 12 22:51:57 2007
※ 引述《gpgpt (陌生)》之铭言:
: 想请问一下,
: 我现在制作一个网站类似这样:
: ┌──────────────┐
: │1 2 3 4 5 6 上一页|下一页│
: ├──────────────┤
: │┌────────────┐│
: ││ ││
: ││ 图层 ││
: ││ ││
: │└────────────┘│
: └──────────────┘
: 1 2 3 4 5 6 是连结,
: 希望点选该数字时,可以在图层的地方更换页面,而不整个reload(也不使用框架)。
: 我目前是用隐藏显示图层的方式来写,
: 但问题是,这样上一页和下一页该如何处理?
: 还有,我在数字上设有连结反应(变色),
: 希望连到该图层的时候,那个数字可以变成无作用的状态。
: (ex.link是蓝色,但显示layer1时,数字1会是黑色,其他数字是蓝色:
: ┌──────────────┐
: │1 2 3 4 5 6 上一页|下一页│
: ├──────────────┤
: │┌────────────┐│
: ││ ││
: ││ layer1 ││
: ││ ││
: │└────────────┘│
: └──────────────┘ )
: 还有,不知道这种方式会不会load太慢?
: 也或者不需要用这种方式,
: 我知道好像javascript可以做到,
: 不知道有没有相关资源可以套用?
: 非常感谢。
这要用 javascript 可以做到,可是不知道你 js 学的如何。
用 ajax 的好处是可以不用一次把所有的资料都抓下来,
可是 server 端还需要对应的程式来回应 如 php 或 asp 等等,又是另一个议题了。
纯用 js 的原理大概是这样:
假设你有 6 页,会有 6 个 div,div 取相同的名字,一开始只有第一个 div 显示
ex:
<div name="divPage" style="display:block">layer 1</div>
<div name="divPage" style="display:none">layer 2</div>
.........
1 到 6 的数字是连结或按钮,点下去置行一个 js 的方程式,并传入点选的值,
ex:
<a href="javascript:changePage(1)">1</a>
js 的部份:
function changePage(pageNum){
var pages = document.getElementsByName('divPage');
for(var i = 0; i< pages.len; i++){
pages[i].style.cssText = "display:none"; // 把所有的页面都藏起来
}
pages[pageNum -1].style.cssText = "display:block"; // 阵列索引从0开始
// 所以页码要减1
}
按钮变色的部份也是类似的方式,把按钮取相同的名字,(或是把连结放在<span>中)
然後用类似的 js 去改变 style,或是设好两个 class,然後去改变 class
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 219.81.193.180