纯css实现点击li切换颜色注意：实现此功能，必须要给每个li添加tabindex='1'属性。。。。。。。。。。。。。

需求：点击某个li修改其颜色，其它还原。

注意：实现此功能，必须要给每个li添加tabindex='1'属性

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <style>
          #com_header{
              width: 100%;
              height: 60px;
              background-color: #3667AB;
          };
          #com_headtop{
              
          }
          #com_headtop>li{
              float: left;
              width: 150px;
              height: 60px;
              line-height: 60px;      
              text-align: center;
              color: #fff;
              cursor:pointer;
          }
          #com_headtop>li:focus{
              background-color: #FF9148;
              outline-style: none;
          }
      </style>
  </head>
  <body>
      <header id='com_header'>
          <ul id='com_headtop' class="clearfix main">
              <li tabindex="1">首页</li>
              <li tabindex="1">贷款</li>
              <li tabindex="1">信用卡</li>
              <li tabindex="1">大数据信用</li>
              <li tabindex="1">资讯</li>
          </ul>
      </header>
  </body>
  </html>