显示隐藏<span>?急

Question

<span id=x1 style=display:inline>x1</span>
<span id=x2 style=display:none>x2</span>
<a href="#" onclick="javascript:x2.style.display='none';x1.style.display='inline';return false">x1</a>
<a href="#" onclick="javascript:x1.style.display='none';x2.style.display='inline';return false">x2</a>

Answer 1

inline是什么意思，还有block是怎么用？可以用循环实现吗？

Answer 2

除inline外，也可以用block或者空，效果区别你试试就知道.<span id=x1 style=display:block>x1</span>
<span id=x2 style=display:none>x2</span>
<a href="#" onclick="javascript:x2.style.display='none';x1.style.display='block';return false">x1</a>
<a href="#" onclick="javascript:x1.style.display='none';x2.style.display='block';return false">x2</a>或<span id=x1 style=display:>x1</span>
<span id=x2 style=display:none>x2</span>
<a href="#" onclick="javascript:x2.style.display='none';x1.style.display='';return false">x1</a>
<a href="#" onclick="javascript:x1.style.display='none';x2.style.display='';return false">x2</a>

Answer 3

秋水的办法对于少数几个span那是还有用的,但是若
span多起来的话,你自己可以试试这种方法的效果.<br><span id=id1>X1</span>
<span id=id2 style="display: none">X2</span>
<span id=id3 style="display: none">X3</span>
<span id=id4 style="display: none">X4</span>
<span id=id5 style="display: none">X5</span>
<span id=id6 style="display: none">X6</span>
<span id=id7 style="display: none">X7</span><br><a href="#" onclick="cc(1)">1</a>
<br><a href="#" onclick="cc(2)">2</a>
<br><a href="#" onclick="cc(3)">3</a>
<br><a href="#" onclick="cc(4)">4</a>
<br><a href="#" onclick="cc(5)">5</a>
<br><a href="#" onclick="cc(6)">6</a>
<br><a href="#" onclick="cc(7)">7</a><script language=javascript>
function cc(n)
{
  var e = document.getElementsByTagName("span");
  for (var i=0; i<e.length; i++)
  {
    if(e[i].id.length > 2 && e[i].id.substr(0,2) == "id") //选择id=id2这种格式的span
    e[i].style.display = "none";
  }
  eval("document.all.id" + n).style.display = "";
  return false;
}
</script>

Answer 4

block : 　CSS1　块对象的默认值。用该值为对象之后添加新行 
none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行 
compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象 
er : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用 
inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器 
list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志 
run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象 
table : 　CSS2　将对象作为块元素级的表格显示 
table-caption : 　CSS2　将对象作为表格标题显示 
table-cell : 　CSS2　将对象作为表格单元格显示 
table-column : 　CSS2　将对象作为表格列显示 
table-column-group : 　CSS2　将对象作为表格列组显示 
table-header-group : 　CSS2　将对象作为表格标题组显示 
table-footer-group : 　CSS2　将对象作为表格脚注组显示 
table-row : 　CSS2　将对象作为表格行显示 
table-row-group : 　CSS2　将对象作为表格行组显示 

Answer 5

<SCRIPT LANGUAGE=javascript>
<!--
function listChange(x) {
var obj=eval(x);
for(i=1;i<obj;i++) {
eval("menu" + i).style.display='none';
}
eval("menu" + x).style.display='';
for(i=obj+1;i<=5;i++) {  // 其中的5是你span的总数
eval("menu" + i).style.display='none';
}
}
//-->
</SCRIPT><a href="javascript:listChange('1')">层一</a>
<a href="javascript:listChange('2')">层二</a>
<a href="javascript:listChange('3')">层三</a>
<a href="javascript:listChange('4')">层四</a>
<a href="javascript:listChange('5')">层五</a><span id="menu1" style="display:">11111</span>
<span id="menu2" style="display:none">222222222</span>
<span id="menu3" style="display:none">3333333</span>
<span id="menu4" style="display:none">44444</span>
<span id="menu5" style="display:none">5555555</span>

Answer 6

要让 <span> 显示在一个固定的位置
也可以用拷贝 InnerHTML 的办法：<script>
function oc(i)
{
    var oSpan = oContainer.children(0);
    oSpan.id = "x" + i;
    oSpan.innerHTML = document.all["s"+i].innerHTML;
}
</script>
<br><a href=# onclick="oc(1)">test 1</a>
...<br>
<br><a href=# onclick="oc(9)">test 9</a><br><span id=oContainer>
<span>这里是真正要显示的SPAN所在</span>
</span><span id=s1 style="display:none">test 1</span>
...
<span id=s9 style="display:none">test 9</span>

Answer 7

s1..s9 相当于“数据源”对上面的 oContainer 和它里面的 SPAN，你可以定义任意位置（绝对、相对……）如果用动态改变 display 属性的办法，你可能就不得不为每个 x1..x9..
定义位置了。而用拷贝 innerHTML 的办法，位置和所有的显示属性都只需定义一次

Answer 8

用dreamweaver的behaviors去控制它的显示，
在body load时hide，单击链接时，show

Answer 9

简单办法：
<span id=id1>X1</span>
<span id=id2 style="display: none">X2</span>
<span id=id3 style="display: none">X3</span>
<span id=id4 style="display: none">X4</span>
<span id=id5 style="display: none">X5</span>
<span id=id6 style="display: none">X6</span>
<span id=id7 style="display: none">X7</span><br><a href="Javascript:void(0)" onclick="cc(1)">Link1</a>
<br><a href="Javascript:void(0)" onclick="cc(2)">Link2</a>
<br><a href="Javascript:void(0)" onclick="cc(3)">Link3</a>
<br><a href="Javascript:void(0)" onclick="cc(4)">Link4</a>
<br><a href="Javascript:void(0)" onclick="cc(5)">Link5</a>
<br><a href="Javascript:void(0)" onclick="cc(6)">Link6</a>
<br><a href="Javascript:void(0)" onclick="cc(7)">Link7</a><script language=javascript>
function cc(n)
{
document.getElementById("id1").innerHTML = document.getElementById("id"+n).innerHTML;
}
</script>