Tab标签

最新推荐文章于 2019-05-29 20:43:21 发布

明外

最新推荐文章于 2019-05-29 20:43:21 发布

阅读量1.5k

点赞数

分类专栏：原创 css .NET 文章标签： Tab标签

本文链接：https://blog.csdn.net/xmroom/article/details/16812697

版权

.NET 同时被 3 个专栏收录

25 篇文章 1 订阅

订阅专栏

原创

17 篇文章 1 订阅

订阅专栏

css

1 篇文章 1 订阅

订阅专栏

下面我将实现一个控件效果：

如下图：

主要代码：

selector.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="selector.aspx.cs" Inherits="selector" %>

<!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>
    <link rel="Stylesheet" type="text/css"  href="Css/Tab.css" />
    <script  type="text/javascript"  src="Scripts/jquery-1.4.1.min.js"></script>
    <script  type="text/javascript">
        function g(o) { return document.getElementById(o); }
        function HoverLi(n) {
            //如果有N个标签,就将i<=N;
            //本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列
            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';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h2>Tab标签</h2>
    <div class="tab">
       <!--tab开始-->
        <div class="w936">
              <div id="tb_" class="tb_">
              <ul>
                  <li id="tb_1" class="hovertab" οnclick="x:HoverLi(1);">TagName</li>
                  <li id="tb_2" class="normaltab" οnclick="i:HoverLi(2);">className</li>
                  <li id="tb_3" class="normaltab" οnclick="a:HoverLi(3);">多条件</li>
                  <li id="tb_4" class="normaltab" οnclick="HoverLi(4);">子查询</li>
                  <li id="tb_5" class="normaltab" οnclick="i:HoverLi(5);">直接查询</li>
                  <li id="tb_6" class="normaltab" οnclick="i:HoverLi(6);">层次</li>
              </ul>
              </div>
              <div class="ctt" style="overflow: hidden;">
                 <div class="dis" id="tbc_01">
                      <h2>Tab1</h2>
                </div>
                 <div class="undis" id="tbc_02">
                  <h2>Tab2</h2>
    
                </div>
                 <div class="undis" id="tbc_03">
                     <h2>Tab3</h2>
                     

                </div>
                 <div class="undis" id="tbc_04">
                     <h2>Tab4</h2>
                </div>
                 <div class="undis" id="tbc_05">
                    <h2>Tab5</h2>
                </div>
                 <div class="undis" id="tbc_06">
                     <h2>Tab6</h2>
                </div>

              </div>
         </div>
       <!--tab结束-->
    </div>
    </div>
    </form>
</body> 
</html>

Tab.css

/*tab效果*/
.normaltab   { background-image:url('../images/systemframe/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif'); background-repeat: no-repeat; color:#729CD2 ; font-weight:bold;}
.hovertab    { background-image: url('../images/systemframe/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif'); background-repeat: no-repeat; color: #1F3A87; font-weight:bold }
.dis{
	display:block;
	color: #319FAA;
}
.undis{display:none;}

/*Tab布局
最外层div:*/
.tab{
	height:300px;
	width:540px;
	border:#A8B7CC solid 1px;
}
/*第二层div:*/
.w936{
	clear:both;
	width:540px;/*婊戝姩闂ㄧ殑瀹藉害*/
	height:300px;
	clear:both;
	
}


/*菜单层div:*/
.tb_{
	background-image:url(../images/systemframe/tabbg.jpg);
	background-repeat:repeat-x;
	height: 24px;
	padding-top:2px;
	text-align:center;
	width: 540px;
	
}
.tb_ ul{height:24px; float:left; margin:0px; padding:0px;color:Red;}
.tb_ li
{
    list-style:none;
	float:left;
	height: 24px;
	line-height:1.9;
	width: 90px;
	cursor:pointer;
    margin-top: 6px; !important;
	margin-top:0px;
	font-size: 14px;
}

/*展开层div:*/
.ctt{
	height:auto;
	width:520px;
	padding:6px;
	clear:both;
}

明外

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tab标签

下面我将实现一个控件效果：如下图：主要代码：selector.aspx function g(o) { return document.getElementById(o); } function HoverLi(n) { //如果有N个标签,就将i<=N;
复制链接

扫一扫

专栏目录