jQueryの基本

jQuery UI

CSSクラスの設定例●要素が選択中/選択済みであることを示す

  $('ul#webtech').selectable();

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;}

さらに赤文字のCSSの行を追加すると
リストをクリックすると選択状態になり、マウスボタンを放すと色が変わる。このCSSのクラス名が重要なキーワードになっている

実行例　

HTML
CSS
javaScript
jQuery
Wevサーバー

html

<ul id="webtech">
  <li>HTML</li>
  <li>CSS</li>
  <li>javaScript</li>
  <li>jQuery</li>
  <li>Wevサーバー</li>
</ul>

Webサーバーの文字をクリックして選択状態のときのHTML

<ul id="webtech" class="ui-selectable">
  <li class="ui-selectee">HTML</li>
  <li class="ui-selectee">CSS</li>
  <li class="ui-selectee">javaScript</li>
  <li class="ui-selectee">jQuery</li>
  <li class="ui-selectee ui-selecting">Wevサーバー</li>
</ul>

マウスを放して赤になったときのHTML

<ul id="webtech" class="ui-selectable">
  <li class="ui-selectee">HTML</li>
  <li class="ui-selectee">CSS</li>
  <li class="ui-selectee">javaScript</li>
  <li class="ui-selectee">jQuery</li>
  <li class="ui-selectee ui-selected">Wevサーバー</li>
</ul>