一个有关选项卡的问题?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 标签示例 </title>
<style type= "text/css ">
<!--
body { font-size:14px; font-family: "宋体 "}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(bg.gif) repeat-x;
}
-->
</style>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function doClick_tab(o,n){
o.className= "selectTag ";
var j;
var id;
var e;
for(var i=1;i <=n;i++){
id = "tab "+i;
j = document.getElementById(id);
e = document.getElementById( "tab_con "+i);
if(id != o.id){
j.className= "li ";
e.style.display = "none ";
}else{
e.style.display = "block ";
}
}
}
//-->
</SCRIPT>
</head>
<body>
<div id= "con ">
<ul id= "tags ">
<li class= "selectTag " id= "tab1 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 基本信息 </a> </li>
<li id= "tab2 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 库存信息111111 </a> </li>
<li id= "tab3 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 采购信息 </a> </li>
<li id= "tab4 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 销售信息 </a> </li>
</ul>
<div id= "tab_con1 " style= "display:block; "> 111111111111111111111 </div>
<div id= "tab_con2 " style= "display:none; "> 222222222222222222 </div>
<div id= "tab_con3 " style= "display:none; "> 33333333333333333333 </div>
<div id= "tab_con4 " style= "display:none; "> 444444444444444 </div>
</div>
</body>
</html>
复制代码,本地运行一下,就能看到现在的样式
就在这段JS上做修改,如何才能实现切换效果,望高手赐教!!!!
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 标签示例 </title>
<style type= "text/css ">
<!--
body { font-size:14px; font-family: "宋体 "}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(bg.gif) repeat-x;
}
-->
</style>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function doClick_tab(o,n){
o.parentNode.className= "selectTag ";
var j;
var id;
var e;
for(var i=1;i <=n;i++){
id = "tab "+i;
j = document.getElementById(id);
e = document.getElementById( "tab_con "+i);
if(id != o.parentNode.id){
j.className= "li ";
e.style.display = "none ";
}else{
e.style.display = "block ";
}
}
}
//-->
</SCRIPT>
</head>
<body>
<div id= "con ">
<ul id= "tags ">
<li class= "selectTag " id= "tab1 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 基本信息 </a> </li>
<li id= "tab2 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 库存信息111111 </a> </li>
<li id= "tab3 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 采购信息 </a> </li>
<li id= "tab4 "> <a href= "# " onClick= "javascript:doClick_tab(this,4) "> 销售信息 </a> </li>
</ul>
<div id= "tab_con1 " style= "display:block; "> 111111111111111111111 </div>
<div id= "tab_con2 " style= "display:none; "> 222222222222222222 </div>
<div id= "tab_con3 " style= "display:none; "> 33333333333333333333 </div>
<div id= "tab_con4 " style= "display:none; "> 444444444444444 </div>
</div>
</body>
</html>
