<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul{list-style:none;margin:30px auto;width:200px;} li{display:inline-block;width:19px;height:19px;background:url("3.png") no-repeat;} li.active{background:url("2.png") no-repeat;} li.lit{background:url("1.png") no-repeat;} </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> <script src="jquery-1.11.3.min.js"></script> <script> $("li").each(function(){ var $this=$(this); var $index=$this.index(); $this.on("click",function(){ if($index>2){ $this.parent().find("li").removeClass("active"); $this.parent().find("li").removeClass("lit"); $this.addClass("active"); $this.prevAll().addClass("active"); $this.nextAll().removeClass("active"); }else{ $this.parent().find("li").removeClass("active"); $this.parent().find("li").removeClass("lit"); $this.addClass("lit"); $this.prevAll().addClass("lit"); $this.nextAll().removeClass("lit"); } }) }) </script> </html>
