javascript - 根据 URL 在 a href 之前附加图像

Question

我有一个简单的列表，例如

<ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="contact.html">Contact</a></li>
</ul>

是否可以将不同图像附加到 <a></a> 之前的列表项中根据 URL 进行标记，这样我就可以得到类似的东西:

<ul>
    <li><img src="img-1.png"> <a href="index.html">Home</a></li>
    <li><img src="img-2.png"> <a href="about.html">About</a></li>
    <li><img src="img-3.png"> <a href="contact.html">Contact</a></li>
</ul>

不幸的是，我不是 JavaScript 专家，所以希望得到任何帮助。

Answer 1

我会在 CSS 中这样做:

a {
    display: inline-block;
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 32px auto; /* if the image is bigger */
}

a[href='index.html'] {
    background-image: url('img-1.png');
}

a[href='about.html'] {
    background-image: url('img-2.png');
}

a[href='contact.html'] {
    background-image: url('img-3.png');
}