jQuery UI

CSSクラスの設定例●選択状況の変化に合わせたイベント処理

 $('dl#webtech').selectable({
    selected:function(ev,ui) {
       $('span#label').text(
         $('.ui-selected',ui.selectable).map(function() {
           return $(this).text();
         } ).get().join()
       );
    },
    unselected:function(ev,ui) {
      if($('.ui-selected',ui.selectable).length < 1)
         $('span#label').text('選択されていません');
   }
} );

CSS設定

.ui-selectable {border:1px solid #000;}
.ui-selectee {border:2px dashed #f00;}
.ui-selecting {background-color:#cf9;}
.ui-selected {background-color:#cf9;color:red;}
.ui-unselecting {background-color:#9cf;}
.ul, li{margin:1em; padding:5px;}

<ul id="webtech">
  <li>HTML</li>
  <li>CSS</li>
  <li>javaScript</li>
  <li>jQuery</li>
  <li>Wevサーバー</li>
</ul>
<div>
  <h3>選択された要素</h3>
  <span id="label">選択されていません</span>
</div>