>  기사  >  웹 프론트엔드  >  탭바의 전환 효과를 얻는 방법

탭바의 전환 효과를 얻는 방법

一个新手
一个新手원래의
2017-10-11 10:25:182860검색

탐색 모음 전환 효과:

html 코드는 다음과 같습니다.

<ul id="tab">
    <li class="fli">tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul>

<p id="tab_con">

    <p class="fp">aaaa</p>

    <p>bbbb</p>

    <p>cccc</p>

</p>

css 스타일 코드는 다음과 같습니다.

       ul, li, p {
            padding: 0;
            margin: 0;
        }

        ul li {
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            border: 1px #bbb solid;
            border-bottom: none;
            cursor: pointer;
        }

        ul li.fli {
            background-color: #ccc;
            color: red;
        }

        ul {
            overflow: hidden;
            zoom: 1;
            list-style-type: none;
        }

        #tab_con {
            width: 304px;
            height: 200px;
        }

        #tab_con p {
            width: 304px;
            height: 200px;
            display: none;
            border: 1px #bbb solid;
            border-top: none;
        }

        #tab_con p.fp {
            display: block;
            background-color: #ccc;
        }

        .tclass{
            width: 100px;
            height: 30px;
            background: #000;
        }

js 코드는 다음과 같습니다.

<script type="text/javascript">

    var tabs = document.getElementById("tab").getElementsByTagName("li");
    var ps = document.getElementById("tab_con").getElementsByTagName("p");
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = function () {
            change(this);
        }
    }

    function change(obj) {

        for (var i = 0; i < tabs.length; i++) {
            if (tabs[i] == obj) {
                tabs[i].className = "fli";
                ps[i].className = "fp";
            }
            else {
                tabs[i].className = "";
                ps[i].className = "";
            }
        }
    }

</script>

위 내용은 탭바의 전환 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.