求助一段 javascript 代码（网站制作）

求助一段javascript大妈（网站制作）我想制作如下一个效果：<ul></li>A</li></li>B</li></li>C</li></li>D</li></ul... 求助一段 javascript大妈（网站制作）
我想制作如下一个效果：

<ul>
</li> A</li>
</li> B</li>
</li> C</li>
</li> D</li>
</ul>

<div class=wrapA>
<div class=wrapB></div>
<div class=wrapC></div>
<div class=wrapD></div>
</div> *注意 wrapA是包着其他3个div的）

当点击A选项卡的时候 wrapA 里面的内容wrapB、wrapC、wrapD显示
当点击B选项卡的时候只有wrapB 里面的内容显示（其他的 wrapC 和wrapD 不显

示
同样，
当点击C选项卡的时候只有wrapC 里面的内容显示
当点击D选项卡的时候只有wrapD 里面的内容显示

这个就是一个用js改变他们的css属性 display：none；display：block；
可以来回切换点击
目前我对js 不熟悉不知道怎么写烦请各位帮帮忙紧急求助~~！！！谢谢！！
他们的命名您可以按自己的习惯，我只是叙述了我想达到的效果
css 方面我没有问题展开

 我来答

2个回答

#热议# 空调使用不当可能引发哪些疾病？

364761308
2011-03-20 · TA获得超过708个赞

知道小有建树答主

回答量：369

采纳率：0%

帮助的人：493万

我也去答题访问个人页

关注

展开全部

<html><head>
<script type="text/javascript">
function tabPage(sPage){
document.getElementById("b").style.display = "none";
document.getElementById("c").style.display = "none";
document.getElementById("d").style.display = "none";
switch(sPage){
case "b":
document.getElementById("b").style.display = "";
break;
case "c":
document.getElementById("c").style.display = "";
break;
case "d":
document.getElementById("d").style.display = "";
break;
}
}
</script>
</head><body>
<ul>
<li>A</li>
<li onclick="tabPage('b')">B</li>
<li onclick="tabPage('c')">C</li>
<li onclick="tabPage('d')">D</li>
</ul>
<div class=wrapA>
<div class=wrapB id="b">BBB</div>
<div class=wrapC id="c">CCC</div>
<div class=wrapD id="d">DDD</div>
</div>
</body>
</html>

这种布局方法是现在常用的tab标签的布局，不知道是否符合你的要求

追问

谢谢你的  帮助
 但是你 没有完全理解我说的
 我还想，就是说在点击A的时候 B,C,D能够再次 显示出来
 你上面帮忙写的那个  默认的 B,C,D是显示出来但是当我点击了其他后 再点A 不能恢复到初始状态
  因此这个不算是 能够 任意来回切换，不知可否在帮忙改一下，谢谢~！！

追答



 function tabPage(sPage){
  document.getElementById("b").style.display = "none";
  document.getElementById("c").style.display = "none";
  document.getElementById("d").style.display = "none";
  switch(sPage){
   case "a":
    document.getElementById("b").style.display = "";
    document.getElementById("c").style.display = "";
    document.getElementById("d").style.display = "";
    break;
   case "b":
    document.getElementById("b").style.display = "";
    break;
   case "c":
    document.getElementById("c").style.display = "";
    break;
   case "d":
    document.getElementById("d").style.display = "";
    break;
  }
 }

A
 B
 C
 D

BBB
 CCC
 DDD

这次应该可以了

本回答由提问者推荐

已赞过 已踩过<

评论收起

loveid
2011-03-20 · TA获得超过358个赞

知道小有建树答主

回答量：447

采纳率：100%

帮助的人：517万

我也去答题访问个人页

关注

展开全部

<div>
<ul>
<li onClick="clicktab('wrapA');"> A</li>
<li onClick="clicktab('wrapB');"> B</li>
<li onClick="clicktab('wrapC');"> C</li>
<li onClick="clicktab('wrapD');"> D</li>
</ul>
<div id=wrapA class="wrap">
<div id=wrapB class="wrap">一</div>
<div id=wrapC class="wrap">二</div>
<div id=wrapD class="wrap">三</div>
</div>
</div>
<script language="javascript">
function clicktab(tabname){
document.getElementById("wrapA").style.display = "";
document.getElementById("wrapB").style.display = "none";
document.getElementById("wrapC").style.display = "none";
document.getElementById("wrapD").style.display = "none";
if(tabname=='wrapA'){
document.getElementById("wrapB").style.display = "";
document.getElementById("wrapC").style.display = "";
document.getElementById("wrapD").style.display = "";
}
else{
document.getElementById(tabname).style.display = "";
}
}
</script>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求助一段 javascript 代码（网站制作）

其他类似问题

为你推荐：