用原生JS、jQuery 写简单选项卡

原生选项卡

	简单写几个选项卡，都是底层，使用原生编写的，如果有所帮助，请点赞哦

HTML代码

<div id="tab" class="abc">
    <ul>
        <li class="select">box1</li>
        <li>box2</li>
        <li>box3</li>
    </ul>
    <div class="select">bigbox1</div>
    <div>bigbox2</div>
    <div>bigbox3</div>
</div>

版本1

思路

    1. 获取所有的li;
    2. 循环所有的li,给每一个li绑定点击事件；
    3. 点击当前li,移除其他li的select的class名，并且移出所有div的class;
    4. 点击li,让被点击的li新增class类名是select;并且让与之对应的div新增class；

代码

	var oTab = document.getElementById("tab");
	var oLis = oTab.getElementsByTagName("li");
	var divs = oTab.getElementsByTagName("div");
	 for(var i=0;i<oLis.length;i++){
	  oLis[i].index = i;
        oLis[i].onclick = function () {
            // 点击，让所有li的class都清除；
            for(var j=0;j<oLis.length;j++){
                oLis[j].className="";
                divs[j].className="";
            }
              this.className = "select";
            divs[this.index].className="select"
        }
    }

版本2

使用了ES6 let

	 	let tab = document.getElementById("tab");
	    let oLis = tab.getElementsByTagName("li");
	    let divs = tab.getElementsByTagName("div");
	     for(let i=0;i<oLis.length;i++){
        // let 会让for循环没循环一次，都会形成一个子作用域，这个子作用域存储了每一次循环i对应的值；
         oLis[i].onclick = function () {
             // 清空所有的li和div身上的class;
             for(var j=0;j<oLis.length;j++){
                 oLis[j].className="";
                 divs[j].className="";
             }
             // this--> 点击的li;
             this.className="select";
             divs[i].className="select";
         }
    }

版本3 jQuery

<script src="jquery-1.11.3.js"></script>
<script>
 $("li").click(function () {
        // console.log(this);// 被点击的li;
        // this把其转成jquery的实例
        $(this).addClass("select").siblings().removeClass("select").parent().next().children().eq($(this).index()).addClass("select").siblings().removeClass("select");
    });
    </script>

温馨提示：使用jQuery之前，请先引用jQuery 哦
都是底层代码（未优化），如有不当，请评论指出