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/
今天越懒,明天要做的事越多。