点击后定位，背景提亮_选择卡点击后怎么让背景亮js-CSDN博客

本文链接：https://blog.csdn.net/moxiaoya1314/article/details/77731686
直接上代码吧！！！
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /* 实现这样的效果主要是要定位 向右侧偏移一下就可以了 */
    .sidebar { position: relative; width: 200px; height: <a href="https://www.baidu.com/s?wd=500px&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">500px</a>; background: #DDD; border: 1px solid #F00; }
    .sidebar > ul { position: relative; padding: 0; margin: 0; width: 160px; margin-top: 30px; float: right; right: -1px; }
    .sidebar li { <a href="https://www.baidu.com/s?wd=text-align&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">text-align</a>: center; <a href="https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">list-style</a>: none; padding: 0; margin: 0; font: 12px/3 "Microsoft YaHei",SimHei; }
    .sidebar li>a { <a href="https://www.baidu.com/s?wd=text-decoration&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">text-decoration</a>: none; color: #333; }
    .sidebar .hover { border: 1px solid #B4B4B4; border-right: none; background: #EEE; }
    </style>
    <!-- 引入jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
    /*
    // jQuery方式开始
    $(function(){
        $('div.sidebar li').click(function(){
            $(this).addClass('hover').siblings('li').removeClass('hover');
        })
    })
    // jQuery方式结束
    */
    // 原生Javascript
    window.οnlοad=function(){
        var obj=document.getElementById('nav');
        var lis=obj.getElementsByTagName('li');
 
        obj.οnclick=function(event){
            var e=event||window.event;
            var obj=e.srcElement?e.srcElement:e.target;
            // 去掉其他LI的hover样式
            for(var i=0, l=lis.length; i < l; i++){
                lis[i].className="";
            }
            switch(obj.tagName){
                case 'LI':                
                    obj.className="hover";
                    break;
                case 'A':
                    obj.parentNode.className="hover";
                    break;
            }
        }
    }
    </script>
</head>
<body>
<div class="sidebar">       
    <ul id="nav">
        <li class="hover" ><a href="#">caidan</a></li>
        <li><a href="#">菜单二</a></li>
        <li><a href="#">菜单三</a></li>
        <li><a href="#">菜单四</a></li>
        <li><a href="#">菜单五</a></li>
    </ul> 
</div>
</body>
</html>