ul li的项目符号颜色能否改变

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ul li的项目符号颜色能否改变相关的知识,希望对你有一定的参考价值。

默认情况为黑色圆点,有没有什么办法把黑色圆点变成绿色的!

参考技术A 制作一个你需要显示颜色的圆点。
<style>
.item1 ullist-style:none
.item1 lipadding-left:20px;background:url(圆点图片地址) no-repeat
</style>
<div class=item1>
<ul>
<li>这个前面会显示你制作的圆点,也可以网上找这样的图片。</li>
<li>paddin-left:20px数值可根据要求进行调整</li>
</ul>
</li>本回答被提问者采纳
参考技术B 这个好像不行,不过你可以做个绿色的圆点吧之前黑色的圆点给替换掉

ul根据后台添加li,并在点击li时,颜色随之变化

在我们大多数时候都是通过<ul><li>...</li></ul>来实现同级的加载,但是也用很多时候li里的内容是不固定的。需要根据后台返回数据来生成。

下面来说一下在vue中这种形式的做法;

首先在HTML中的代码如下

<ul>
        <li v-for="item in classify" :key="item.id" 
        :class="activeClass == item.id ? ‘active‘:‘‘"
        @click.stop.prevent="changeCify(item)">
            {{ item.name }}
        </li> 
</ul>                        
classify为后台返回的集合。也可以自己在data里写。咱们为了演示效果所以在data中的return里写出来。如下所示:
return {
      activeClass: 1,
      classify: [{ id:1, name:共道 },{ id:2, name:个人代账},
      { id:3, name:电商园区 },{ id:4, name:钉钉 },
      { id:5, name:app },{ id:6, name:官网 },
      { id:7, name:阿里云 }, { id:8, name:阿里云市场 }], 
}

还有我们的点击时执行的函数,写在methods中;如下

changeCify(item){
   
    this.activeClass = item.id;

    console.log(item)
}

这样就全部完成了,包括了v-for 加载li,和点击方法 changeCify(item) 。和颜色的自动切换 :class="activeClass == item.id ? ‘active‘:‘‘" 。就是这些。希望对你有帮助

以上是关于ul li的项目符号颜色能否改变的主要内容,如果未能解决你的问题,请参考以下文章

怎么可以改变Li标签的背景颜色

求助js操作多ul li背景颜色问题

javascript获取ul标签的id,如何才能改变ul内li的背景颜色等属性

下拉菜单中的父 li 不改变悬停时的颜色

如何在 HTML 中更改项目符号点的颜色 [重复]

js 点击ul下面的其中一个li改变背景颜色 li其中一句:<li onclick="td(this)">第1个</li> 然后呢,js代码