关闭

简洁实用的TAB选项卡

656人阅读 评论(0) 收藏 举报

//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>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1361901次
    • 积分:11873
    • 等级:
    • 排名:第1303名
    • 原创:248篇
    • 转载:55篇
    • 译文:0篇
    • 评论:129条
    最新评论