用JavaScript写选项卡的多种实现功能，只需点击上面的导航标签即可切换下方内容，用原生js实现选项卡以及闭包版和 JQ方法实现选项卡，

本文链接：https://blog.csdn.net/weixin_47485418/article/details/107020638

选项卡的三种实现功能，只需点击上面的导航标签即可切换下方内容

用原生js实现选项卡
以及闭包版
JQ方法实现选项卡
**

原生js

CSS样式

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }


        .box {
            width: 600px;
            margin: 100px auto 0;
        }

        #uu1 {
            height: 30px;
        }

        #uu1 li {
            height: 30px;
            width: 50px;
            background-color: yellowgreen;
            float: left;
            margin-right: 5px;
        }

        #uu1 li.current {
            background-color: deeppink;
        }

        #uu2 li {
            width: 600px;
            height: 400px;
            background-color: deeppink;
            display: none;
            font-size: 60px;
        }

        #uu2 li.current {
            display: block;
        }
    </style>

HTML部分

<div class="box">
        <ul id="uu1">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <ul id="uu2">
            <li class="current">风急天高猿啸哀</li>
            <li>渚清沙白鸟飞回</li>
            <li>无边落木萧萧下</li>
            <li>不尽长江滚滚来</li>
            <li>万里悲秋常作客</li>
            <li>百年多病独登台</li>
        </ul>
    </div>

Script部分

<script>
	//**原生js**
    // //获取元素
    var btnObjs=document.getElementById('uu1').getElementsByTagName('li');
    var liObjs=document.getElementById('uu2').getElementsByTagName('li');

    // 循环所有的btnObjs，注册点击事件
    for (var i = 0; i < btnObjs.length; i++) {
        //给每一个btnObjs添加自定义属性index
        btnObjs[i].setAttribute('index',i);
   // 给每一个btnObjs注册点击事件
        btnObjs[i].onclick=function () {
        //获取当前btnObjs的index值
            var index=this.getAttribute('index');
            // 初始化
            for (var j = 0; j < btnObjs.length; j++) {
            //2.给每个li的类名为空
                btnObjs[j].className='';
                 liObjs[j].className=''
            }
            //1.给每个li添加类名
            this.className='current';
            liObjs[index].className='current';
        }
    }
    </script>

script

//闭包版的

    //获取元素
     var btnObjs=document.getElementById('uu1').getElementsByTagName('li');
     var liObjs=document.getElementById('uu2').getElementsByTagName('li');

     for (var i = 0; i < btnObjs.length; i++) {
         (function (index) {
            btnObjs[i].onclick=function () {
                 for (var j = 0; j < btnObjs.length; j++) {
                     btnObjs[j].className='';
                     liObjs[j].className='';
                 }
                 this.className='current';
                 liObjs[index].className='current';
            }

         })(i);
    }

JQ版的选项卡

 <script src="../jQuery文件/jquery-1.12.1.js"></script>
    <script>

        $('#uu1 li').click(function(){
            $(this).addClass('current').siblings().removeClass('current');
            //获取索引值
            var i = $(this).index()
            $('#uu2 li').eq(i).addClass('current').siblings().removeClass('current');
        })
      </script>