1. 程式人生 > >在列表中,點擊不同列表項,改變為當前選中樣式

在列表中,點擊不同列表項,改變為當前選中樣式

cli ++ round ont css clas highlight click ava

一: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" } } }

在列表中,點擊不同列表項,改變為當前選中樣式