リストをクリック可能にするにはどうすればよいですか？

Question

現在、私はa pure CSS color paletteに所属しており、リンクにする必要があります。私は<a>タグでラップした順序付けられていないリストを使ってこのパレットを作成しました。私はこれがあまり意味論的ではないという疑いを持っています。これを達成する正しい方法は何でしょうか？あなたがアンカー内のリストを置くことができない

HTML

<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イベントを使用しますか？

Answer 4

JSでのクリックを既に処理しているので、アンカーは純粋に美容であると仮定します。その場合は、CSSを使用することができます：

.color-chips:hover { 
    cursor:pointer; 
}