<p>我在我的电子商务网页上的产品详细页面上创建了一个颜色按钮列表。 当我进入页面时，我希望默认选择匹配的颜色li按钮。 每个产品页面上都有一个特定的颜色名称（文本字符串）可供使用。 以下是我的代码摘要。</p> <pre class="brush:php;toolbar:false;">&lt;div class="color-wrap"&gt; &lt;ul&gt; &lt;li class="text"&gt;&lt;a href="/link.." class="ivory" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="text"&gt;&lt;a href="/link.." class="beige"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="text selected"&gt;&lt;a href="/link.." class="green"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="text"&gt;&lt;a href="/link.." class="blue"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;style&gt; .color-wrap {} .color-wrap li a {} .color-wrap li.selected a {border-color:red;} .color-wrap .ivory {#fff;} .color-wrap .beige {#eee;} .color-wrap .green {green;} .color-wrap .blue {blue;} &lt;/style&gt;</pre> <p>我的想法是使用JavaScript来查找/搜索/匹配“a”标签的类名中的颜色名称，并强制将类“selected”添加到li中。 如您所见，按钮名称应该通过其“a”标签而不是“li”标签来识别。 我对编码几乎一无所知。</p> <p>我查看了所有类似的stackoverflow线程，但找不到解决方案。 请帮帮我:(</p> <p>到目前为止，我尝试了match，find，filter函数，但都失败了。</p>

const selectedColor = "green";
document.querySelector(".color-wrap a." + selectedColor).parentNode.classList.add("selected");

.color-wrap {}
.color-wrap li a {}
.color-wrap li.selected a {border: red 1px solid;}
.color-wrap .ivory {color: #fff;}
.color-wrap .beige {color: #eee;}
.color-wrap .green {color: green;}
.color-wrap .blue {color: blue;}

<div class="color-wrap">
<ul>
  <li class="text"><a href="/link.." class="ivory">Ivory</a></li>
  <li class="text"><a href="/link.." class="beige">Beige</a></li>
  <li class="text"><a href="/link.." class="green">Green</a></li>
  <li class="text"><a href="/link.." class="blue">Blue</a></li>
</ul>
</div>