当前位置:Gxlcms > JavaScript > 一个tab标签切换效果代码_extjs

一个tab标签切换效果代码_extjs

时间:2021-07-01 10:21:17 帮助过:4人阅读

HTML:
代码如下:















            CSS:
            代码如下:

            #tabsK {
            float:left;
            width:100%;
            line-height:normal;
            border-bottom:1px solid #54545C;
            }
            #tabsK ul {
            margin:0;
            padding:10px 10px 0 10px;
            list-style:none;
            }
            #tabsK li {
            display:inline;
            margin:0;
            padding:0;
            cursor:pointer;
            }
            #tabsK a {
            float:left;
            background:url("image/tableftK.gif") no-repeat left top;
            margin:0;
            padding:0 0 0 4px;
            text-decoration:none;
            }
            #tabsK a span {
            float:left;
            display:block;
            background:url("image/tabrightK.gif") no-repeat right top;
            padding:8px 16px 4px 6px;
            color:#FFF;
            }

            #tabsK a span {float:none;}
            /* End IE5-Mac hack */
            #tabsK a:hover span {
            cursor:pointer;
            color:#FFF;
            background-position:100% -42px;
            }
            #tabsK a:hover {
            background-position:0% -42px;
            cursor:pointer;
            }
            #tabsK .hover a
            {
            background-position:0% -42px;
            }
            #tabsK .hover span
            {
            background-position:100% -42px;
            }

            .tab2 ul
            {
            display:none;
            list-style-type:none;
            height:560px;
            }
            .tab2 ul li
            {
            text-align:left;
            line-height:20px;
            text-indent:1em;
            }
            .tab2 .block
            {
            display:block;
            }

            JS:
            代码如下: