1. 爱易网页
  2. JavaSript
  3. 一个有关选项卡的有关问题

一个有关选项卡的有关问题

日期：2014-05-16　 浏览次数：20522 次

一个有关选项卡的问题?
<!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>

相关资料更多>

  1. onclick事件为什么会自动触发？该如何解决
  2. jsp页面form表单交付验证
  3. javaScript中_proto_与prototype的差别与联系
  4. js 设立class
  5. 关于数字计算的有关问题
  6. jQuery,js兑现Iframe自适应高度(兼容多浏览)
  7. JavaScript Patterns 札记（三） 循环
  8. Ext Store获取服务器的json数据时显示下载框解决方案
  9. 浮动广告有关问题