按照下例，请简写onclick事件的实现效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

ul{
list-style-type: none;
padding: 0;
margin: 0;
}
ul li{
width: 200px;
line-height: 50px;
text-align: center;
background-color: white;
color: #333;
}
.one:hover{
background-color: darkorchid;
}
.two:hover{
background-color: burlywood;
}
.three:hover{
background-color: #7971CF;
}
.four:hover{
background-color: #F4990A;
}

</style>
</head>
<body>
<ul>
<li class="one lis">武汉</li>
<li class="two kis">上海</li>
<li class="three lis">广州</li>
<li class="four lis">福州</li>
</ul>
</body>
<script type="text/javascript">
var one = document.querySelector(".one");
var two = document.querySelector(".two");
var three = document.querySelector(".three");
var four = document.querySelector(".four");

one.onclick = function (){
one.style.backgroundColor = "darkorchid";
two.style.backgroundColor = null;
three.style.backgroundColor = null;
four.style.backgroundColor = null;
}
two.onclick = function (){
two.style.backgroundColor = "burlywood";
one.style.backgroundColor = null;
three.style.backgroundColor = null;
four.style.backgroundColor = null;
}
three.onclick = function (){
three.style.backgroundColor = "#7971CF";
one.style.backgroundColor = null;
two.style.backgroundColor = null;
four.style.backgroundColor = null;
}
four.onclick = function (){
four.style.backgroundColor = "#F4990A";
one.style.backgroundColor = null;
two.style.backgroundColor = null;
three.style.backgroundColor = null;
}

</script>
</html>

解决方案 »

  1.   


    $(document).ready(function(){
        $('li').click(function(){
            $(this).parent().find('>li').css('background','transparent');
            $(this).css('background',['darkorchid','burlywood','#7971CF','#F4990A'][$(this).index()]);
        })
    })
      

  2.   


        var one = document.querySelector(".lis");
        var two = document.querySelector(".two");
        var three = document.querySelector(".three");
        var four = document.querySelector(".four");
        var kv = { one: 'darkorchid', two: 'burlywood', three: '#7971CF', four: '#F4990A' }
        one.onclick = two.onclick = three.onclick = four.onclick = function () {
            one.style.backgroundColor = two.style.backgroundColor = three.style.backgroundColor = four.style.backgroundColor = null
            this.style.backgroundColor = kv[this.className.replace(/ [lk]is/g, '')]
        }Web开发学习资料推荐
    JavaScript apply与call的用法及区别
    javascript混淆加密
      

  3.   

    <body>
    <ul>
    <li class="one lis" onclick="changeColor(this,'darkorchid')">武汉</li>
    <li class="two kis" onclick="changeColor(this,'burlywood')">上海</li>
    <li class="three lis" onclick="changeColor(this,'#7971CF')">广州</li>
    <li class="four lis" onclick="changeColor(this,'#F4990A')">福州</li>
    </ul>
    </body>
    <script type="text/javascript">
    function changeColor(item,color){
    var items = document.getElementsByTagName('li');
    for (var i=0;i<items.length;i++) {
        items[i].style.backgroundColor = null;
    }
    item.style.backgroundColor=color;
    }

    </script>
      

  4.   

    <ul>
    <li class="one lis" data-bg="darkorchid">武汉</li>
    <li class="two lis" data-bg="burlywood">上海</li>
    <li class="three lis" data-bg="#7971CF">广州</li>
    <li class="four lis" data-bg="#F4990A">福州</li>
    </ul>var allLi = document.getElementsByTagName("li");
    var length = allLi.length;
    var prevIndex = null;for(let i=0;i<length;i++){
    allLi[i].onclick = function(){
    if(prevIndex!==null){
    allLi[prevIndex].style.backgroundColor = null;
    }
    this.style.backgroundColor = this.dataset.bg;
    prevIndex = i;
    }
    }