<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

​

<div>

  <ul class="uls">

    <li>1</li>

    <li>1</li>   

    <li>1</li>   

    <li>1</li>

    <li>1</li> 

​

  </ul>

</div>

$(".uls li").click(function(){

        $(this).addClass("red");  

        $(this).siblings().removeClass("red");

 })

*{

  margin:0;

  padding:0;

}

ul,li{

  list-style:none;

}

ul{

  width:200px;

  height:auto;

  border:1px solid #ccc;

}

ul li{

  width:100%;

  height:40px;

  text-align:center;

  border:1px solid #ccc;

  line-height:40px;

}

.red{

  width:100%;

  height:40px;

  background:red;

}