Question

我正在使用asp.net项目符号列表控件我可以通过设置项目符号列表的imageURL属性来使用图像，但这将反映属于该项目符号列表的所有列表项。如果我想为每个列表项使用不同的图像，该怎么办？

Answer 1

添加一些类来表示不同的列表图像：

CSS：

ul { list-style-type: none; }
.bullet1 { list-style-image: url("images/list_bullet.jpg")}
.bullet2 { list-style-image: url("images/list_bullet2.jpg")}

在HTML中，将每个列表项设置为将显示图像的类。

HTML：

<ul>
  <li class="bullet1"><span>item 1</span></li>
  <li class="bullet2"><span>item 2</span></li>
</ul>

我没有使用BulletedList控件，但您应该可以在每个单独的列表项上设置CSSClass属性，可以直接在标记中或在其中一个数据绑定事件中设置（如果您的列表是数据绑定）。

您还可以在呈现页面后使用JQuery操作列表。例如，此脚本将每个其他列表项设置为不同的图像：

<script type="text/javascript">
    $(document).ready(function () {
        $('#list li').each(function (index) {
            var imgClass = index % 2 == 0 ? 'bullet1' : 'bullet2';
            $(this).addClass(imgClass);
        })
    });
</script>

Answer 2

如何使用Repeater控件来自定义项目符号列表？见this answer。

我们可以为asp.net项目符号列表控件使用不同的图像吗？如果是的话怎么样？

2 个答案: