Implementation of tab

Implementation of tab

dom operation of native js will be used

html
<body>
    <div id="tab">
        <div id="tab_header">
            <ul>
                <li class="seclect">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div id="tab_body">
            <div class="dom" style="display: block;">
                <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>3</li>
                    <li>3</li>
                    <li>3</li>
                    <li>3</li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>4</li>
                    <li>4</li>
                    <li>4</li>
                    <li>4</li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>5</li>
                    <li>5</li>
                    <li>5</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
    </div>

css will not be released

js

window.onload = function(){
    var allLis = $('tab_header').getElementsByTagName('li');
    var allDoms = $('tab_body').getElementsByClassName('dom');
    console.log(allLis,allDoms);
    // All LIS obtained by traversal
    for(var i =0; i<allLis.length;i++){
        var li = allLis[i];
        li.index = i; 
        li.onmouseover = function(){
            // Exclusive thoughts empty all class es
            for(var j = 0;j<allLis.length;j++){
                allLis[j].className = '';
                allDoms[j].style.display='none';
            }
           this.className = 'seclect';
           allDoms[this.index].style.display='block';
        }
    }
}
function $(id){
    return typeof id === "string" ? document.getElementById(id) : null;
}

The function $(id) in this is a dom id selector encapsulated by me,
First get the event source to prepare the operation, and traverse the obtained array. When the onmouseover mouse moves in, traverse an array again, and change all the classname in the array to null, as well as the display style to hide. When moving in, which to move in and which to assign the value can be done.

Published 2 original articles · praised 4 · visited 23
Private letter follow

Posted on Wed, 12 Feb 2020 09:26:44 -0500 by mjlively