如何使列表可点击？

Question

我目前正在开发需要链接的纯CSS调色板。我使用无序列表创建了这个调色板，然后将其包装在一个<a>标记中。不过，我怀疑这不是很语义。实现这一目标的正确途径是什么？

<div class="color-palette">
<a href="#">Modern Feminine</a>
<a href="#">
    <ul class="color-chips group">
        <li class="grey">#999999</li>
        <li class="slate">#666666</li>
        <li class="lilac">#99878D</li>
        <li class="blush">#7E4A5C</li>
        <li class="plum">#372129</li>
    </ul><!--.color-chips group-->
</a>
</div><!--.color-palette-->

CSS

.color-palette {
    width: 280px;
    margin: 0 auto;
    padding: 0;
}

ul.color-chips {
    margin: 0 auto;
    padding: 0;
}

ul.color-chips li {
    float: left;
    margin: 0;
}

ul.color-chips li {
    float: left;
    width: 55px;
    height: 55px;
    text-indent: -9999px;
}

Answer 1

你不能在锚里放一个单子。

您需要使列表中的每一项都成为单独的链接。

<ul class="color-chips group">
        <li class="grey"><a href="">#999999</a></li>
        <li class="slate"><a href="">#666666</a></li>
        <li class="lilac"><a href="">#99878D</a></li>
        <li class="blush"><a href="">#7E4A5C</a></li>
        <li class="plum"><a href="">#372129</a></li>
    </ul><!--.color-chips group-->

如果您不需要链接，因为您实际上没有链接到任何东西(也就是说，您正在执行页面上的操作)，只需将所有锚一起移除即可。在附加Javascript onclick事件时，不需要它们。

Answer 2

<ul class="color-chips group">
    <li class="grey"><a href="javascript:;">#999999</a></li>
    <li class="slate"><a href="javascript:;">#666666</a></li>
    <li class="lilac"><a href="javascript:;">#99878D</a></li>
    <li class="blush"><a href="javascript:;">#7E4A5C</a></li>
    <li class="plum"><a href="javascript:;">#372129</a></li>
</ul>

Answer 3

点击后你想做什么？触发单击时是否使用javascript事件？