選項卡：

.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選項卡及評星