プルダウンメニューで、要素の表示を切り替え「Focused」
当ページのリンクには広告が含まれています。
スポンサーリンク
プルダウンメニューで、要素の表示を切り替えることのできるプラグイン「Focused」を紹介します。
jQueryプラグイン「Focused」
このプラグインを使えば、プルダウンメニュー（セレクトメニュー select、option）で指定した要素の表示を切り替えることができます。
例えば、div要素に囲われた画像を切り替えたり……などを簡単に実装することができます。
スポンサーリンク
デモページのプルダウンメニューをいろいろ選択してしてみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Focusedのデモでーす。">
<title>Focused - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.focused.js"></script>
</head>
<body>
<h1>Focused のデモでーす。</h1>
<div class="demo">
<label for="focus">選択してください → </label>
<select name="focus">
<option value="red">赤</option>
<option value="orange">橙</option>
<option value="yellow">黄</option>
<option value="green">緑</option>
<option value="blue">青</option>
<option value="indigo">藍</option>
<option value="purple">紫</option>
</select>
<div data-focus="red">
<img src="images/red.png">
</div>
<div data-focus="orange">
<img src="images/orange.png">
</div>
<div data-focus="yellow">
<img src="images/yellow.png">
</div>
<div data-focus="green">
<img src="images/green.png">
</div>
<div data-focus="blue">
<img src="images/blue.png">
</div>
<div data-focus="indigo">
<img src="images/indigo.png">
</div>
<div data-focus="purple">
<img src="images/purple.png">
</div>
</div>
<script>
$(function domReady() {
$('.demo').focused();
});
</script>
</body>
</html>
スポンサーリンク