在列表中,点击不同列表项,改变为当前选中样式

Posted asplover

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在列表中,点击不同列表项,改变为当前选中样式相关的知识,希望对你有一定的参考价值。

一:html 代码部份

<div class="c_left_menu" id="oList">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

 

二:CSS代码

#onClicked{
    color:red;
    font-size:24px;
    background:yellow;
    /*border-radius:5px 0 0 5px;*/
    box-shadow: 12px  0px red;
}

 

二:javascript

//被单击添加#Onclicked,.其它未被点击设置#noOncliked
function  c_left_menu_ulLi(){
    var oList=document.getElementsByTagName("li");   
    for(var i=0;i<oList.length;i++){
        //被单击添加#Onclicked,.其它未被点击设置#noOncliked
        oList[i].onclick=function(){                      
            for(var j=0;j<oList.length;j++){
                oList[j].id="noOnClicked";              
            }          
               this.id="onClicked"        
           
        }
    }
   
}

 

 

以上是关于在列表中,点击不同列表项,改变为当前选中样式的主要内容,如果未能解决你的问题,请参考以下文章

易语言循环取超级列表框被选中项目到指定变量

vue项目实现渲染列表获取当前点击项(高亮)

css在点击时改变元素的样式

在使用Towify制作小程序时,如何配置样式的选中激活?

请问怎么在小程序的表单配置选中某项变色功能?

vue可点击列表加滑块怎么实现