javascript - 小物出品テンプレート

Question

このようなものを作成したい

JS/jQuery で作成する必要がありますか? そして、それはどのように見えるでしょうか？任意のコード スニペットをお願いします。たとえば、1b を選択すると 1 つの画像が返され、2a を選択すると他の画像が返されます。

1 2 3

a b c

アップデート：

  <script>

    //returning frame data att
    $(document).ready(function() {
    $(function(){
        $('.frame').click(function(){
            alert($(this).data("frame"));
            });
        });
    }); 


    //returning roof data att
    $(document).ready(function() {
    $(function(){
        $('.roof').click(function(){
            alert($(this).data("roof"));
            });
        });
    }); 



    </script>

    <h3>Frame</h3>
    <a href="#" class="frame" data-frame="1">Blue</a><br/>
    <a href="#" class="frame" data-frame="2">Red</a><br/>
    <a href="#" class="frame" data-frame="3">Green</a><br/>
    <a href="#" class="frame" data-frame="4">Purple</a>


    <h3>Roof</h3>  

    <a href="#" class="roof" data-roof="1">Clear</a><br/>
    <a href="#" class="roof" data-roof="2">Moodust</a><br/>
    <a href="#" class="roof" data-roof="3">Yellow</a><br/>

これで、どのボックスがクリックされたかというアラートが表示されました。次に、それらをグループ化する必要があります。たとえば、ボックスの青をクリックすると青が選択され、[クリア] をクリックすると選択され、画像 1_1.jpeg などの出力が表示されます。

フィドル - http://jsfiddle.net/antonoff/pPvmy/