<style>

	*{padding:0px;margin:0px;}

	ul li{list-style:none;}

	.box ul li{padding:10px 0px;}

	.active{background:red;}

  </style>

div class="box">

		<ul>

		   <li class="active">1</li>

		   <li>2</li>

		   <li>3</li>

		   <li>4</li>

		</ul>

</div>

		$(".box").find("li").on("click",function(){

<script type='text/javascript' src="jquery-1.11.2.min.js"></script>

	<script type="text/javascript">

		$(".box").find("li").on("click",function(){

			var $index = $(this).index();//获取点击当前的索引

			$(this).addClass("active").siblings("li").removeClass("active");//为当前点击元素添加class,移除相邻兄弟元素li的active

			console.log($index);

		});

		 var $li = $(".box li").eq(0);//获取第一li

		 console.log($li);

	</script>

(function(){

			var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式

			var ulDom = boxDom.getElementsByTagName("ul")[0];

			var liDom = ulDom.getElementsByTagName("li");

			for(var i=0;i<liDom.length;i++){

				liDom.index = i;//当前的索引值，添加一个自定义索引,自定义属性值,index是每一个li上自定义的索引值

				liDom[i].onclick = function(){

					//for循环,先清除所有的样式，再添加当前需要的样式

					for(var j=0;j<liDom.length;j++){

						liDom[j].className = "";//所有的li清除样式，0 1 2

					};

					this.className = "active"//为当前点击的class添加样式

				       console.log(this.index);//对应每一个点击li获取当前的index索引，0,1,2

				}

			}

		})()

var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式

			var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式

			var ulDom = boxDom.getElementsByTagName("ul")[0];

			var liDom = ulDom.getElementsByTagName("li");

                       //初始化值

			var oli = null,num=0;//oli是上一次的值,num是初始值

			oli = liDom[num];

			for(var i=0;i<liDom.length;i++){

				liDom.index = i;//当前的索引值，添加一个自定义索引

				liDom[i].onclick = function(){

					oli.className = "";//将所有oli的class值清除

					oli = this;//记录上一次的class

					this.className = "active";//添加当前点击的class

				}

			}