c#中类似TableControl的标签控件。

最新推荐文章于 2023-09-12 11:19:12 发布

weixin_34367257

最新推荐文章于 2023-09-12 11:19:12 发布

阅读量394

点赞数

文章标签： xhtml php c#

先看看截图

实现的就是类似的效果。

下面把代码全部上上：（有几个图片，可以去我的csdn下载我这个项目。）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="标签效果.aspx.cs" Inherits="wsw_测试_标签效果" %>

<!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 runat="server">
    <title>无标题页</title>
    <style media="screen" type="text/css">   

* {   
    font-size:12px;   
}   
html, body {   
    margin:0;   
    text-align:center;   
    over-flow:hidden;   
    height:100%;   
    width:100%;   
}   
UL {   
    list-style-type:none;   
    margin:0px;   
}   
/* 标准盒模型 */  
.ttl {   
    height:18px;   
}   
.ctt {   
    height:auto;   
    padding:6px;   
    clear:both;   
    border:1px solid #064ca1;   
    border-top:0;   
    text-align:left;   
}   
.w936 {   
    margin:2px 0;   
    clear:both;   
    width:936px;/*滑动门的宽度*/  
}   
/* TAB 切换效果 */  
.tb_ {   
    background-image: url('tabs2_1.gif');   
    background-repeat: repeat-x;   
    background-color: #E6F2FF;   
}   
.tb_ ul {   
    height:24px;   
}   
.tb_ li {   
float:left;   
    height: 24px;   
    line-height:1.9;   
    width: 94px;   
    cursor:pointer;   
}   
/* 控制显示与隐藏css类 */  
.normaltab {   
    background-image:url('tabs2_2.gif');   
    background-repeat: no-repeat;   
    color:#1F3A87;   
}   
.hovertab {   
    background-image: url('tabs2_3.gif');   
    background-repeat: no-repeat;   
    color:#1F3A87;   
    font-weight:bold   
}   
.dis {   
    display:block;   
}   
.undis {   
    display:none;   
}   

</style>  

<script type="text/javascript" language="javascript">   
//<!CDATA[   
function g(o){return document.getElementById(o);}   
function HoverLi(n){   
//如果有N个标签,就将i<=N;   
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';   
}   
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;   
//]]>   
</script>    
</head>
<body>
    <form id="form1" runat="server">
    <div class="w936">   
  <div id="tb_" class="tb_">   
    <ul>   
      <li id="tb_1" class="hovertab" οnmοuseοver="x:HoverLi(1);"> ASP.NET</li>   
      <li id="tb_2" class="normaltab" οnmοuseοver="i:HoverLi(2);"> MYSQL</li>   
      <li id="tb_3" class="normaltab" οnmοuseοver="a:HoverLi(3);"> DELPHI</li>   
      <li id="tb_4" class="normaltab" οnmοuseοver="o:HoverLi(4);"> VB.NET</li>   
      <li id="tb_5" class="normaltab" οnmοuseοver="g:HoverLi(5);"> JAVA</li>   
      <li id="tb_6" class="normaltab" οnmοuseοver="z:HoverLi(6);"> PHP5</li>   
    </ul>   
  </div>   
  <div class="ctt">   
    <div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div>   
    <div class="undis" id="tbc_02">这里是MYSQL的相关内容</div>   
    <div class="undis" id="tbc_03">这里是DELPHI的相关内容</div>   
    <div class="undis" id="tbc_04">这里是VB.NET的相关内容</div>   
    <div class="undis" id="tbc_05">这里是JAVA的相关内容</div>   
    <div class="undis" id="tbc_06">这里是PHP5的相关内容</div>   
  </div>   
</div>   
    </form>
</body>
</html>

上面功能：csdn下载。。。http://download.csdn.net/detail/njxiaogui/4165885

weixin_34367257

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
c#中类似TableControl的标签控件。

先看看截图实现的就是类似的效果。下面把代码全部上上：（有几个图片，可以去我的csdn下载我这个项目。）&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="标签效果.aspx.cs" Inherits="wsw_测试_标签效果" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DT
复制链接

扫一扫