从淘宝下的一个分栏目功能，请高手过来看看
http://www.wodegongju.com/bbs/viewthread.php?tid=179&fpage=1
也可以到这里看一下，上面有图片说明：
下载下来的功能是第一个栏目下面包括了之后几个栏目的所有内容，我想要的是第一个栏目中只显示第一个栏目所在的内容，依此类推。
几个文件的代码如下：
default.html
<LINK href= "20070416.css " type=text/css rel=stylesheet>
<LINK href= "20070422.css " type=text/css rel=stylesheet>
<body >
<div id= "Content ">
<script type= "text/javascript ">
var TabNames = new Array( "宝贝详情 ", "其他信息 ", "aaaa ");
var TabIds = new Array( "DetailInfo ", "MemoInfo ", "BidRecord ", "GuestBook ");
</script>
<script src= "taobao.js " language= "javascript " type= "text/javascript "> </script>
<div id= "InfoSelectorTarget "> </div>
<div id= "DetailInfo ">
<h2 class= "Title "> 宝贝详情 </h2>
</div>
<div id= "MemoInfo ">
<h2 class= "Title "> 其他信息 </h2>
</div>
<div id= "BidRecord ">
<h2 class= "Title "> 555 </h2>
</div>
<script language= "javascript " type= "text/javascript ">
initInfoSelector();
</script>
</div>
</body>
===
taobao.js
function initInfoSelector(){
var liNode,aNode,i,j;
//Output Tab Menu
var targetNode = document.getElementById( 'InfoSelectorTarget ');
if(!targetNode) return;
var ulNode = createElement( 'ul ');
ulNode.className = "TabBarLevel1 ";
ulNode.id = "InfoSelector ";
ulNode = targetNode.appendChild(ulNode);
for(i=0;i <TabNames.length;i++){
liNode = createElement( 'li ');
liNode.id = "Tab " + TabIds;
if(i == 0) liNode.className= "Selected ";
liNode = ulNode.appendChild(liNode);
aNode = createElement( 'a ');
aNode = liNode.appendChild(aNode);
aNode.appendChild(document.createTextNode(TabNames));
}
document.getElementById(TabIds[0]).className = "CurInfo ";
//Deploy Triggers
var x = document.getElementById( 'InfoSelector ');
if (!x) return;
var y = x.getElementsByTagName( 'li ');
for (i=0;i <y.length;i++){
for(j=0;j <y.childNodes.length;j++){
if(y.childNodes[j].tagName == "A " || y.childNodes[j].tagName == "a "){
y.childNodes[j].onmouseover = activeInfoStyle;
y.childNodes[j].onmouseout = inactiveInfoStyle;
y.childNodes[j].onclick = switchInfo;
break;
}
}
}
x.onclick = null;
}
//Show or Hide the Info Sectors
function switchInfo(evnt){
for (var i=0;i <TabNames.length;i++){
if(getTriggerNode(evnt).parentNode.id == "Tab "+TabIds){
doSwitchInfo(i);
}
}
}
function doSwitchInfo(n){
for (var i=0;i <TabNames.length;i++){
var sector = document.getElementById(TabIds);
if(!sector) return;
if(n == 0){
sector.style.display = " ";
sector.className = " ";
document.getElementById(TabIds[0]).className = "CurInfo ";
switchTab(0);
}else{
sector.style.display = "none ";
if(n == i){
sector.style.display = " ";
sector.className = "CurInfo ";
switchTab(i);
}
}
}
}
//Mouseover Effect
function activeInfoStyle(evnt){
getTriggerNode(evnt).style.color = "#FF5500 ";
}
//Mouseout Effect
function inactiveInfoStyle(evnt){
if(getTriggerNode(evnt).parentNode.className == "Selected ")
getTriggerNode(evnt).style.color = "#FFFFFF ";
else
getTriggerNode(evnt).style.color = "#333333 ";
}
//Switch Tab Effect
function switchTab(n){
for(var i=0;i <TabNames.length;i++){
var x = document.getElementById( "Tab "+TabIds);
x.className = " ";
var y = x.getElementsByTagName( 'a ');
y[0].style.color= "#333333 ";
}
document.getElementById( "Tab "+TabIds[n]).className = "Selected ";
}
//Create New DOM Element
function createElement(element) {
if (typeof document.createElementNS != 'undefined ') {
return document.createElementNS( 'http://www.w3.org/1999/xhtml ', element);
}
if (typeof document.createElement != 'undefined ') {
return document.createElement(element);
}
return false;
}
//Get The Node Who Sent the Mouse Event
function getTriggerNode(e) {
var obj;
if (document.all) {
obj = event.srcElement;
}else {
obj = e.target;
}
return obj;
}
====
是用js来控制div的显示
[解决办法]
show code ? or any questions?
