js选项卡及评星

Posted 2020-10-29 yy_68

选项卡：

.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‘ : ‘‘);
            })
         })
    })

个人总结笔记，有误请指出，谢谢