简洁实用的TAB选项卡

原创 2012年03月27日 12:28:40

//CSS代码部分

#lib_Tab1{width:980px;margin:0px;padding:0px;}

.lib_Menubox {height:28px;line-height:28px;position:relative;}
.lib_Menubox ul{margin:0px;padding:0px;list-style:none; top:3px; left:0; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox li{
float:left;
display:block;
cursor:pointer;
width:180px;
margin-right:8px;
height:30px;
line-height:25px;
background-color:#05A;
color:#F7F7F7;
font-size:16px;
font-weight:bold;

}
.lib_Menubox li.hover{
font-size:16px;
font-weight:bold;
background:#fff;
display:block;
width:200px;
height:30px;
line-height:25px;
background-color:#004080;
}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:left;padding-top:8px; padding-left:8px;}
.lib_Contentbox li {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-top-color: #E0E0E0;
border-right-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
width:450px; line-height:24px;

}

//JS代码部分



<script>
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>

//HTML代码部分

<div id="lib_Tab1">
      <div class="lib_Menubox lib_tabborder">
        <ul>
          <li id="one1" onClick="setTab('one',1,4)" class="hover">组团版旅行社管理软件</li>
          <li id="one2" onClick="setTab('one',2,4)" >地接版旅行社管理软件</li>
          <li id="one3" onClick="setTab('one',3,4)">旅游分销系统</li>
          <li id="one4" onClick="setTab('one',4,4)">直客版旅行社网站</li>
        </ul>
      </div>
      <div class="lib_Contentbox lib_tabborder">
        <div id="con_one_1"  style="margin-top:25px;"> [ecmsinfo]3,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_2"   style="margin-top:25px;display:none"> [ecmsinfo]4,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_3" style="margin-top:25px;display:none"> [ecmsinfo]5,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_4" style="margin-top:25px;display:none">
          <table width="98%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><a href="/about/map.html" target="_blank"><img src="/skin/wanjia2/images/map.gif" alt="万家版图"   height="180" border="0"></a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>



相关文章推荐

简洁实用JavaScript Tab滑动门选项卡特效

这是一款简洁实用JavaScript tab滑动门 选项卡特效 把 onclick="nTabs(this,0) 变成 onmouserover="nTabs(this,0),可以做一个鼠标放上去就换...

网站常用简洁的TAB选项卡

  • 2014年06月24日 10:07
  • 33KB
  • 下载

126邮箱TAB选项卡效果(同一页面可多次使用)

简洁Tab

不规则TAB选项卡 鼠标悬浮效果

  • 2012年03月23日 13:05
  • 12KB
  • 下载

angularjs-标签页tab选项卡

选项卡一:JavaScript+html+css #div1 .active{ backgroun...

Axure制作tab选项卡(动态面板)

步骤入下:第一步:使用动态面板找到元件库中的动态面板,并将其拖拽到右边的内容区域,想要多宽多高自己调试。第二步:给动态面板添加状态选中动态面板,右键 —> 管理面板状态 —>需要多少项就添加多少个 —...
  • IT429
  • IT429
  • 2017年04月17日 17:29
  • 502
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简洁实用的TAB选项卡
举报原因:
原因补充:

(最多只允许输入30个字)