隐藏div [英] hiding divs

问题描述

嗨大师


我有一个页面，看起来有点像这样：


....

< body>

< div ID = id1> ................< / DIV>

< div ID = gsd> ................< / DIV>

< div ID = ewd> ...... ..........< / DIV>

< div ID = fac> ................< / DIV> ;

< div ID =行动> ................< / DIV>

< / body>


我希望id1始终可见，但其他ID只有

可见一个时间，使用类似


< A HREF ="＃esf" onclick =" showdiv（''act''）">


这样做的最佳方法是什么？


- TIA


Nicolaas

PS我正在寻找一个真正可靠的解决方案，因为我正在寻找使用它

500页面，它也肯定需要为没有javascript的人工作

（在这种情况下一切都显示...）

解决方案

< blockquote>最好的方法是编写一个JS类，它将处理这些div的所有

，因为你需要500页。优点是

，如果你需要改变任何东西，你只能在一堂课中完成。

这就是我在说什么 ：


var handler = new JSScriptHandler（）;

handler.addItem（document.getElementById（''id1''））;

handler.addItem（document.getElementById（''gsg''））;


handler.Start（）; //这个方法实际上会定义所有事件

处理程序等。


这只是一个想法，而不是实现。如果您需要更多技术

信息，请在我们的论坛中通过 www。 worcsnet.com 。在主页上有

实际上是一个类似控件的例子（）。


如果没有JS，我认为没有真正的解决方案。只需确保

您的代码适用于所有浏览器。


希望这会有所帮助，

GregS

IAB Studio开发人员
www.worcsnet.com
www.iabstudio.com

WindAndWaves写道：

嗨大师

我有一个页面，看起来有点像这样：

...
< body>
< div ID = id1> ................< / DIV>
< div ID = gsd> .............. ..< / DIV>
< div ID = ewd> ................< / DIV>
< div ID = fac> ................< / DIV>
< div ID = act> ................< / DIV>
< / body>

我希望id1始终可见，但其他ID只有
可见一个，如果时间，使用的东西喜欢

< A HREF ="＃esf" onclick =" showdiv（''act''）">

这样做的最佳方式是什么？

- TIA

Nicolaas
PS我正在寻找一个真正可靠的解决方案，因为我正在寻找在500页上使用
它，它也肯定需要为没有
javascript的人工作（在这种情况下）一切都显示...）

WindAndWaves写道：

我想id1到在任何时候都可见，但其他ID只有在时间可见时才能看到，使用类似

< A HREF =&## esf"的onclick = QUOT; showdiv（行为）">


这似乎是一个非常标准的要求，但是你的例子有点不清楚，混合了一个esf。用行为锚定id（意思是，内部哈希需要
a吗？）。

PS我正在寻找一个真正可靠的解决方案，因为我正在寻找在 500页，它也肯定需要为没有javascript的人工作
（在这种情况下，一切都显示...）

脚本部分在下面的代码可以用作js include，

最好在body标签结束之前写。它是独立的页面结构
（

页面中不需要任何特殊设置），也不应该阻止现有脚本正常运行。

< style type =" text / css">

a {margin：0 1em;}

div [id] {background-color：黄色;颜色：橙色;}

< / style>


< div>

< a href ="＃ foo1"> Foo1< / a>

< a href ="＃foo2"> Foo2< / a>

< a href ="＃ foo3"> Foo3< / a>

< / div>

< div id =" foo1"> Foo1< / div>

< div id =" foo2"> Foo2< / div>

< div id =" foo3"> Foo3< / div>

< script type =" text / javascript">

// ---添加" call"支持---

if（！Function.prototype.call）{

Function.prototype.call = function（obj，arg）{

var fn =" call"，ret;

while（typeof obj [fn]！=" undefined"）fn + = fn;

obj [fn] =这个;

ret = obj [fn]（arg）;

obj [fn] = null;

返回ret;

}

}


// ---添加通用addEventListener ---

if（typeof _e！ =" function"）{

_e = function（obj，evt，func）{

if（obj [evt]）{

obj [evt] =（函数（f）{

返回函数（evt）{

func.call（this，evt）;

return f.call（this，evt）;

}

}）（obj [evt]）;

} else {

obj [evt] = func;

}

}

}


// ---添加切换机制---

_e（窗口，onload，

函数（evt）{

if（document.getElementById&&

document.getElementsByTagName&&am p;

document.body&&

document.body.style&&

typeof document.body.style.display ==" string"

）{


// ---核心---

var activeDiv，handler， show，hide，getId，map;


map = {};

hide = function（el）{el.style.display =" none" ; }

show = function（el）{el.style.display =" block" ;; }

getId = function（s）{return s.substr（s.lastIndexOf（&＃; quot）+ 1）; }

handler = function（evt）{

if（activeDiv！= this）{

if（activeDiv）hide（activeDiv）;

show（activeDiv = map [this.href]）;

}

返回true;

}


// ---条件初始化---

var ii，dv，a;


（ii） = 0，a = document.getElementsByTagName（" a"）; ii< a .length; ii ++）{

if（a [ii] .href.indexOf（"＃））！ = -1）{

dv = document.getElementById（getId（a [ii] .href））;

if（dv）{

map [a [ii] .href] = dv;

_e（a [ii]，onclick，处理程序）;

hide（dv）; < br $>
}

}

}


}

}

）;

< / script>

WindAndWaves写道：

[.. 。]

Nicolaas
PS我正在寻找一个真正可靠的解决方案，因为我正在寻找在
500页面上使用它，它也肯定需要为没有javascrip的人工作t
（在这种情况下，一切都显示出来了......）

我不能保证Firefox和IE 6以外的浏览器，所以请测试

文件。所有东西都很透彻。


如果用户没有启用JS，则会显示所有div并且

链接成为锚点，因此单击它们将导航到

相应的div。添加名称和ids应该占一些旧的

浏览器，但我现在还不能测试它，直到你。


如果浏览器没有不了解剧本的任何部分，div不是首先隐藏的。您可能想要动态更改

" return false"因此，如果脚本没有完成（即没有隐藏div =

），则遵循div的链接。对不起，我没有

浏览器在这里测试它。


下面的代码，干杯，Rob。

*在< head>中：*


< script type =" text / javascript">

function showDiv（ b，el）{

var bRef = null;

if（document.getElementById）{

bRef = document.getElementById（b）;

}否则{

bRef = document.all [b];

}

if（bRef.childNodes） ）{

var z = bRef.childNodes;

for（var i = 0; i< z.length; i ++）{


//这将隐藏divs

//并显示单击

if（z [i] .nodeName ==''DIV'' && z [i] .style）{

z [i] .style.display =''none'';

if（z [i] .id == el）z [i] .style.display ='''';

}

}

}

}

< / script>

< style type =" text / css">

.demo {width ：200px;身高：300px;}

< / style>

*将onload添加到body标签：*


< body onload =" showDiv（''base''，''''）;">

*有些人会播放HTML来测试它（喜欢颜色!!）*

< div id =" d00">这是div 00< br>

< a href =" #sdf" onclick ="

showDiv（''base''，'sdf''）; this.blur（）; return false;"> sdf< / a>

< a href ="＃abc" onclick ="

showDiv（''base''，''abc''）; this.blur（）;

返回false;">& nbsp; |& nbsp; abc< / a>

< a href ="＃def" onclick ="

showDiv（''base''，''def''）; this.blur（）;

返回false;">& nbsp; |& nbsp; def< / a>

< a href =" #ghi" onclick ="

showDiv（''base''，''ghi''）; this.blur（）;

返回false;">& nbsp; |& nbsp; ghi< / a>

< / div>

< div id =" base">

< div name =" sdf" ID = QUOT; SDF" class =" demo"

style =" background-color：blue;"> div sdf< / div>

< div name =" abc" ; ID = QUOT; ABC" class =" demo"

style =" background-color：red;"> div abc< / div>

< div name =" def" ; ID = QUOT; DEF" class =" demo"

style =" background-color：green;"> div def< / div>

< div name =" ghi" ; ID = QUOT; GHI" class =" demo"

style =" background-color：pink;"> div ghi< / div>

< / div>

Hi Gurus

I have a page, which looks a bit like this:

....
<body>
<div ID=id1>................</DIV>
<div ID=gsd>................</DIV>
<div ID=ewd>................</DIV>
<div ID=fac>................</DIV>
<div ID=act>................</DIV>
</body>

I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like

<A HREF="#esf" onclick="showdiv(''act'')">

What would be the best way of doing this?

- TIA

Nicolaas
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)

解决方案

The best approach would be to write a JS class, which would handle all
of these divs, given that you need it for 500 pages. The advantage is
that if you need to change anything, you would do it only in 1 class.
Here''s what I''m talking about:

var handler = new JSScriptHandler ();
handler.addItem (document.getElementById (''id1''));
handler.addItem (document.getElementById (''gsg''));

handler.Start (); // This method would actually define all event
handlers, etc.

This is just an idea, not implementation. If you need more technical
info, ask this question in our forum at www.worcsnet.com. There is
actually an example of a similar control right on the home page ().

I do not think there''s a real solution without JS. Just make sure that
your code works in all browsers.

Hope this helps,
GregS
IAB Studio developer
www.worcsnet.com
www.iabstudio.com
WindAndWaves wrote:

Hi Gurus

I have a page, which looks a bit like this:

...
<body>
<div ID=id1>................</DIV>
<div ID=gsd>................</DIV>
<div ID=ewd>................</DIV>
<div ID=fac>................</DIV>
<div ID=act>................</DIV>
</body>

I would like id1 to be visible at all times, but the other ids only to be visible one if the time, using something like

<A HREF="#esf" onclick="showdiv(''act'')">

What would be the best way of doing this?

- TIA

Nicolaas
PS I am looking for a real solid solution, as I am looking at using it on 500 pages and it also definitely need to work for people without javascript (in which case everything is shown...)

WindAndWaves wrote:

I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like

<A HREF="#esf" onclick="showdiv(''act'')">
This seems to be a pretty standard requirement, however your exemple is
a bit unclear, mixing a "esf" anchor with an "act" id (meaning, is there
a need for an internal hash?).
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)

The script part in the code below can be used as a js include,
preferably written before the end of the body tag. It is independent
from the page structure (doesn''t require any special setting in the
page), and should not prevent existing scripts from running correctly.
<style type="text/css">
a {margin:0 1em;}
div[id] {background-color:yellow; color:orange;}
</style>

<div>
<a href="#foo1">Foo1</a>
<a href="#foo2">Foo2</a>
<a href="#foo3">Foo3</a>
</div>
<div id="foo1">Foo1</div>
<div id="foo2">Foo2</div>
<div id="foo3">Foo3</div>
<script type="text/javascript">
// --- add "call" support ---
if(!Function.prototype.call){
Function.prototype.call=function(obj, arg){
var fn="call", ret;
while(typeof obj[fn]!="undefined") fn+=fn;
obj[fn]=this;
ret=obj[fn](arg);
obj[fn]=null;
return ret;
}
}

// --- add generic addEventListener ---
if(typeof _e!="function") {
_e=function(obj, evt, func) {
if(obj[evt]) {
obj[evt]=(function(f) {
return function(evt) {
func.call(this, evt);
return f.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}
}

// --- add the toggling mechanism ---
_e(window, "onload",
function(evt) {
if(document.getElementById &&
document.getElementsByTagName &&
document.body &&
document.body.style &&
typeof document.body.style.display=="string"
){

// --- core ---
var activeDiv, handler, show, hide, getId, map;

map = {};
hide = function(el) { el.style.display="none"; }
show = function(el) { el.style.display="block"; }
getId = function(s) { return s.substr(s.lastIndexOf("#")+1); }
handler = function(evt) {
if(activeDiv!=this) {
if(activeDiv) hide(activeDiv);
show(activeDiv=map[this.href]);
}
return true;
}

// --- conditional init ---
var ii, dv, a;

for(ii=0,a=document.getElementsByTagName("a");ii<a .length;ii++){
if(a[ii].href.indexOf("#")!=-1) {
dv=document.getElementById(getId(a[ii].href));
if(dv) {
map[a[ii].href]=dv;
_e(a[ii], "onclick", handler);
hide(dv);
}
}
}

}
}
);
</script>

WindAndWaves wrote:
[...]

Nicolaas
PS I am looking for a real solid solution, as I am looking at using it on
500 pages and it also definitely need to work for people without javascript
(in which case everything is shown...)

I can''t vouch for browsers other than Firefox and IE 6, so please test
the document.all stuff thoroughly.

If the user doesn''t have JS enabled, all the divs are shown and the
links become anchors so clicking on them will navigate to the
appropriate div. Adding names & ids should account for some older
browsers, but again I can''t test it at the moment so up to you.

If a browser doesn''t understand any part of the script, the divs aren''t
hidden in the first place. You may want to dynamically change the
"return false" so that if the script does not complete (i.e. the divs
are not hidden), the link to the div is followed. Sorry, I don''t have
the browsers to test it in here.

Code below, cheers, Rob.

*In the <head>:*

<script type="text/javascript">
function showDiv(b,el){
var bRef = null;
if (document.getElementById) {
bRef = document.getElementById(b);
} else {
bRef = document.all[b];
}
if(bRef.childNodes){
var z = bRef.childNodes;
for (var i=0;i<z.length; i++) {

// This will hide just the divs
// and show the one clicked on
if (z[i].nodeName ==''DIV'' && z[i].style) {
z[i].style.display = ''none'';
if (z[i].id == el) z[i].style.display = '''';
}
}
}
}
</script>
<style type="text/css">
.demo {width: 200px; height: 300px;}
</style>
*Add onload to body tag:*

<body onload="showDiv(''base'','''');">
*Some play HTML to test it out on (love the colours!!)*
<div id="d00">This is div 00<br>
<a href="#sdf" onclick="
showDiv(''base'',''sdf'');this.blur();return false;">sdf</a>
<a href="#abc" onclick="
showDiv(''base'',''abc'');this.blur();
return false;">&nbsp;|&nbsp;abc</a>
<a href="#def" onclick="
showDiv(''base'',''def'');this.blur();
return false;">&nbsp;|&nbsp;def</a>
<a href="#ghi" onclick="
showDiv(''base'',''ghi'');this.blur();
return false;">&nbsp;|&nbsp;ghi</a>
</div>
<div id="base">
<div name="sdf" id="sdf" class="demo"
style="background-color: blue;">div sdf</div>
<div name="abc" id="abc" class="demo"
style="background-color: red;">div abc</div>
<div name="def" id="def" class="demo"
style="background-color: green;">div def</div>
<div name="ghi" id="ghi" class="demo"
style="background-color: pink;">div ghi</div>
</div>

这篇关于隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！