cognos——选项卡切换

整体预览

---

Tab1详解

---

Tab1中的代码如下
<div id="Tab1" style="display:block;">
tab1中的代码如下：

<span style="cursor: hand;"  #光标呈现为 手 的样式，可以自己更改
      onclick="javascript:document.all['Tab1'].style.display='block';  #将Tab1显示为块级元素
      document.all['Tab2'].style.display='none'; #Tab2不显示
      document.all['Tab3'].style.display='none'; #Tab3不显示
">
<font color="#808080">tab1</font></span>  #808080是已选中的颜色

tab2中的代码如下：

<span style="cursor: hand;"  
      onclick="javascript:document.all['Tab1'].style.display='none';
      document.all['Tab2'].style.display='block';
      document.all['Tab3'].style.display='none';
">
<font color="#0000FF"><u>tab2</u></font></span>  #0000FF是未选中的颜色

tab3中的代码如下：

<span style=" cursor: hand;"  
      onclick="javascript:document.all['Tab1'].style.display='none';
      document.all['Tab2'].style.display='none';
      document.all['Tab3'].style.display='block';

">
<font color="#0000FF"><u>tab3</u></font></span>

Tab2详解

除了将Tab2中的代码改为：

<div id="Tab2" style="display:none;">

tab1同上，只是将颜色改成 未选中的颜色，
tab2中的颜色改成已选择的颜色，
tab3中的颜色仍是未选中的颜色。

Tab3详解

除了将Tab2中的代码改为：

<div id="Tab3" style="display:none;">

tab1同上，只是将颜色改成 未选中的颜色，
tab2中的颜色改成未选择的颜色，
tab3中的颜色改成已选中的颜色。

---

效果如下：

切换以后会切换到另一个图。