Native js, single-marquee

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单选框</title>
    <style>
        .options>a {
            color: #333;
            margin: 20px;
        }
        
        .checked {
            color: red!important;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="options">
            <a href="javascript:;" class="checked">男</a>
            <a href="javascript:;">女</a>
            <a href="javascript:;">保密</a>
        </div>
    </div>
    was>Script<
        List = document.querySelectorAll ( " .options A " ); // first tags get all 
        the console.log (List); // array of class 
        // list.onclick = function () {// set of elements is not a direct operation, only the subscript operator can, even if it is only a set of elements

        // }
        for (var i = 0; i < list.length; i++) {
            list[i].onclick = function() {

                // The first method 
                // for (var I = 0; I <List.length; I ++) { 
                //      List [I] .classList.remove ( "the checked"); // Clear All colors 
                // } 
                // this.classList.add ( "checked"); // which color which add click

                // The second method 
                // var checkedOption = document.querySelector ( "Options .checked."); // get checked checked class 
                // checkedOption.classList.remove ( "checked"); // clear all classes 
                // this.classList.add ( "checked"); // this add the class

                // third method 
                for ( var I =  0 ; I < List.length; I ++ ) {
                     IF ( the this  == list [i]) { // the this option is currently operating, if the list [i] and is equal to this, description list [i] this is an operation of our current 
                        the this .classList.add ( " the checked " );
                    } else {
                        list[i].classList.remove("checked");
                    }
                }

            }

        }
    </script>
</body>

</html>
Native js, single-marquee

Guess you like
