选项卡：
.active_tab{ ???color:#f00; ???border:1px solid #f00;}<ul> ???????<li>我是1</li> ???????<li>我是2</li> ???????<li>我是3</li> ???????<li>我是4</li> ???????<li>我是5</li></ul>//使用原生js实现逻辑var lis = document.querySelectorAll("ul li"); Array.prototype.forEach.call(lis, function (li, index) { ???????li.onclick= function () { ???????????Array.prototype.forEach.call(lis, function(v,i){ ???????????????lis[i].classList.remove("active_tab"); ???????????}) ???????????this.classList.add("active_tab"); ???????} ???})//使用jquery更简单$(function(){ ???????????var lis = $("li"); ???????????lis.each(function(i,v){ ???????????????$(this).click(function(){ ???????????????????lis.removeClass("active_tab"); ???????????????????$(this).addClass("active_tab"); ???????????????}) ???????????}) ???????})评星：评星可以使用两张图片，一张是未选中的灰色星星，一张是选中的有颜色的星星，通过控制img的src地址改变状态；也可以使用图标，使用图标可以通过添加类名来控制颜色。下面所使用的是第二种方法，具体的图标使用方法请自行百度。
其实评星和选项卡差不多，所不同的是评星需要给点击星星的前面的星星也改变颜色，不能像第三个星星是彩色，前两个是灰色，点击第三个前两个也得改变颜色。
//使用原生js for(var i = 0;i<lis.length;i++){ ???????lis[i].index = i; ???????lis[i].onclick = function(){ ???????????var that = this.index; ???????????Array.prototype.forEach.call(lis, function (v, j) { ???????????????lis[j].className = j <= that ? ‘active_tab‘ : ‘‘; ???????????}) ???????} ???}//使用jquery ???$("li").each(function (i) { ???????$(this).click(function () { ????????????$("li").each(function (j) { ???????????????$(this).attr(‘class‘, j <= i ? ‘active_tab‘ : ‘‘); ???????????}) ????????}) ???})个人总结笔记，有误请指出，谢谢
js选项卡及评星
原文地址：https://www.cnblogs.com/yk-68/p/8687248.html