JavaScript to implement simple tab bar switching content bar

This article shares the specific code of JavaScript to achieve simple tab bar switching content bar for your reference. The specific content is as follows

HTML+CSS part

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Initialize css, because there is a default margin*{ margin:0; padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}

ol,ul{ list-style:none;}

img,fieldset{ border:0 none; display:block;} */
        div,ul,li{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        a{
            text-decoration: none;
        }
        #nav{
            width: 450px;
            height: 400px;
            margin: 100px auto;/*center left and right*/
            background-color: pink;
            padding: 0;
            font-size: 14px;
        }
        
        li{
            float: left;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 0.6rem;
            border: 0.02rem solid #ccc;
        }
        .content{
            clear: both;
            position: relative;
        }
        .content div{
            width: 450px;
            height: 370px;
            position: absolute;
            display: none;
        }
        .tab .choose{
            background-color: skyblue;
        }
        .content .current{
            display: block;
        }
    </style>
    <script src="jQuery.mini.js"></script>
   
</head>
<body>
    <div id="nav">
        <div class="tab">
            <ul>
                <li class="choose" ><a href="#" > 1</a></li>
                <li><a href="#" >2</a></li>
                <li><a href="#" >3</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="current">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
    </body>
</html>

Native js code

var lis = document.querySelectorAll('li');
var divs = document.querySelector('.content').querySelectorAll('div');
  for(var i=0 ; i<lis.length ; i++){
            lis[i].setAttribute('dateIndex',i);//Set the index of each li to facilitate locking the content bar later lis[i].addEventListener('click',function(){
                for(var j=0 ; j<lis.length ; j++){
                    lis[j].className = ''; //Set the style of all li to empty}
                this.className = 'choose'; //Set the style of the currently clicked li (exclusive)
                var index = this.getAttribute('dateIndex'); //Get the index of the current li
                // console.log(index);
                for(var j=0 ; j<lis.length ; j++){
                   divs[j].className = '';//Exclusive// lis[i].className = 'choose';
                }
                divs[index].className = 'current';
          })
        }

## jQuery Methods ```javascript
// jQuery method $(function(){
            $("li").click(function(){
                $(this).addClass("choose"); //Add styles to the currently clicked li $(this).siblings("li").removeClass("choose"); //Remove styles from its sibling elements (exclusive)
                var index = $(this).index(); //Get the index of the currently clicked li
                $(".content div").eq(index).show().siblings("div").hide();
                //Get the corresponding content box through index, display it through show(), and then hide it by selecting its brother element, decomposition ======》
                //$(".content div").eq(index).show();
                // $(".content div").eq(index).siblings("div").hide()
            })
        })

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: