Home > Web Front-end > JS Tutorial > A tab label switching effect code_extjs

A tab label switching effect code_extjs

WBOY
Release: 2016-05-16 18:54:48
Original
1618 people have browsed it

HTML:

Copy code The code is as follows:













            < ;/div>

            CSS:
            Copy code The code is as follows:

            #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 span
            {
            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:
            Copy code The code is as follows:



            Screenshots and two pictures used:

            Related labels:
            source:php.cn
            Statement of this Website
            The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
            Popular Tutorials
            More>
            Latest Downloads
            More>
            Web Effects
            Website Source Code
            Website Materials
            Front End Template