作者gpmm (银色)
看板Web_Design
标题Re: [问题] div 隐藏&显现layer问题
时间Wed Apr 16 00:18:45 2008
※ 引述《propc (propc)》之铭言：
: 我有很多个layer 1~9 都有分别对应到的连结
: 想要再按一个连结的时候,只显示对应的该layer
: 语法如下
: <p onclick="MM_showHideLayers('S1','','show','S2','','hide')">S1</p>
: 如果只有两个layer 很简单,show一个,hide另一个
: 但有九个layer,要show一格,hide另八个...
: 但是在语法上总不可能把其他的八个layer都写成hide,
: 不知道有没有简单的写法??
: 谢谢大家...
其实最简单的写法就是关 8 开 1，这是概念上不流畅，
但实做上最为简易的方法，
不过如果能以物件的概念来处理，会更为简洁。
首先定义一组 layerIndex，和一个参照 index 来做 switch 的函式：
<script language="javascript">
var layerIndex = ['a', 'b', 'c', 'd', 'e'];
function switchLayer (tar) {
if (!tar) return false;
else if (! (tar = tar.getAttribute ('targetLayer'))) return false;
layerLength = layerIndex.length;
for (var i=0; i<layerLength; i++) {
if ((o = document.getElementById ('layer-' + layerIndex[i])) && o.style)
o.style.display = layerIndex[i] != tar ? 'none' : 'block';
}
}
</script>
layerIndex 不用说，只是简化的 layer id 参照，
switchLayer function 主要是接收传进来的物件本身（此处会是由 link 传入）
，再从此物件取出 targetLayer 属性，判定不关闭的目标 layer 。
接下来的 html 就简单了，
<a href="#" targetLayer="a" onclick="switchLayer(this);">Layer-a</a>
<a href="#" targetLayer="b" onclick="switchLayer(this);">Layer-b</a>
<a href="#" targetLayer="c" onclick="switchLayer(this);">Layer-c</a>
<a href="#" targetLayer="d" onclick="switchLayer(this);">Layer-d</a>
<a href="#" targetLayer="e" onclick="switchLayer(this);">Layer-e</a>
<div id="layer-a">1</div>
<div id="layer-b">2</div>
<div id="layer-c">3</div>
<div id="layer-d">4</div>
<div id="layer-e">5</div>
你可以试用看看 :)
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.139.236.188
※ 编辑: gpmm 来自: 220.139.236.188 (04/16 00:23)
1F：→ propc:谢谢^^ 我会试试看... 04/16 08:58