list-style无颜色问题解决，list-style-type无颜色解决

list-style无颜色问题解决，list-style-type无颜色解决

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月11日 10:15:07 星期五

http://fanshuyao.iteye.com/

 

如下图所示：在Css文件中为li添加样式  list-style-type: decimal;

 

但右边的链接有hover的颜色，而数字没有颜色，显得别扭。

 

解决方法：

解决方法一：给li加上相同的颜色，但不好的是如果a链接本身的颜色和a链接hover时的颜色不一样，又会造成两者在hover时的颜色不一样，所以后面还需要添加相应的css做处理。（这里不再过多说明）

 

解决方法二：不使用ul的list-style-type或list-style属性，则需要添加list-style:none;然后采用js控制，原理就是迭代li，在链接前面加上数字，这样就可以完全一样，如下图所示：

 

html相应的代码：

<div class="support-list">
	<div class="support-list-title">常见问题</div>
	<ul>
		<li>
			<a class="abtnSupportListContent" href="javascript:void(0);"  data-jsp="responsibility.jsp">
				客户使用燃气的权利、责任和义务，燃气供应的责任和义务。
			</a>
			<p class="support-list-content"></p>
		</li>
		<li>
			<a class="abtnSupportListContent" href="javascript:void(0);"  data-jsp="responsibility.jsp">
				如何查找客户编号？
			</a>
			<p class="support-list-content"></p>
		</li>
		<li>
			<a class="abtnSupportListContent" href="javascript:void(0);"  data-jsp="responsibility.jsp">
				燃气供应的责任和义务
			</a>
			<p class="support-list-content"></p>
		</li>
	</ul>
</div>

 

 

JavaScript代码：

 

var lis = $(".support-list").find("li");
		if(lis.length > 0){
			lis.each(function(i, obj){
				var aobj = $(this).children(".abtnSupportListContent").prepend((i +1) +"、");
			});
		}

 

 

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月11日 10:15:07 星期五

http://fanshuyao.iteye.com/