数値の比較で正しく評価されない理由

このQ&Aのポイント
  • 数値の比較で正しく評価されない理由について説明します。
  • サンプルのコードでは、識別番号のラスト値のみを比較していますが、実際は複数の値を比較する必要があります。
  • また、この比較の方法自体が間違っている可能性もあります。
回答を見る
  • ベストアンサー

数値の比較で正しく評価されない理由

下記サンプルで、trueになるべきところがfalseになります。なぜでしょうか。 このサンプルでは識別番号のラスト値のみを比較するものですが、 実際は複数の<dd>の値を比較します。 NO12「DE」-114 という1行の文章に複数の比較する対象が含まれる場合は、 1つの<dd>に<span>で囲い【NO12】、【「DE」】、【114】のそれぞれを比較の対象にしますが、 こういったやり方自体が間違っているのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>識別番号のラスト値</legend> <select name="sss" onchange="spl(this.form)"> <option value="50">50以下</option> <option value="100">100以下</option> <option value="150">150以下</option> <option value="200">200以下</option> </select> </fieldset> </form> <dl> <dt>名前</dt> <dd>ジム</dd> <dt>識別番号</dt> <dd><p><span>NO12</span>「<span>DE</span>」-<span>114</span></p></dd> </dl> <dl> <dt>名前</dt> <dd>トム</dd> <dt>識別番号</dt> <dd><p><span>NO33</span>「<span>DR</span>」-<span>168</span></p></dd> </dl> <dl> <dt>名前</dt> <dd>エミリー</dd> <dt>識別番号</dt> <dd><p><span>NO8</span>「<span>AB</span>」-<span>93</span></p></dd> </dl> <script type="text/javascript"> function spl(f){ var selValue = f.sss.value; var idID = document.getElementsByTagName('p'); var idLen = idID.length; for(i=0; i<idLen; i++){ var spans = idID[i].getElementsByTagName('span'); var pawwar = spans[2].innerHTML; if(pawwar<=selValue){ alert("true"); }else{ alert("false"); } } } </script> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

どんなプログラムの値にも「型」があります。 例の場合は、数値として期待しているところを文字列として認識しているのではないでしょうか。 分かりやすく言うと、電話番号の「0120」は、文字列であって数字ではありません。仮に「0120+1」とやっても、0121(足し算)にはならずに、01201(文字の連結)になります。同じように、文字列として認識されている変数に<(大なり)などの演算子を使っても意味をなしません。文字列として認識されている変数を数値に変換するには、Number()がいちばん手っ取り早いと思います。

kiseki777
質問者

お礼

<script type="text/javascript"> function spl(f){ var selValue = Number(f.sss.value); var idID = document.getElementsByTagName('p'); var idLen = idID.length; for(i=0; i<idLen; i++){ var spans = idID[i].getElementsByTagName('span'); var pawwar = Number(spans[2].innerHTML); if(pawwar<=selValue){ alert("true"); }else{ alert("false"); } } } </script> このようにNumber()で型変換したらできました。 有難うございました。

関連するQ&A

  • 名前と名字をそれぞれ比較して表示する

    名字と名前に分けて、selectで比較するものを作りたいです。 名前は無視して「山田」という名字のみを比較する場合、 「あああ」という名字で「太郎」という名前を比較する場合 全部を無視して比較する場合など、で比較したいです。 名字を無視して名前のみを比較するものは使いません。 <dd><p>山田太郎</p></dd>というのを変えずに、 あまりコードを増やさずにやりたくて htm.match(sn) && sm="指定なし"な感じにやってみたのですが、 上手にできません。この場合どんなものが役立つのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サンプル</title> </head> <body> <form action="#"> <fieldset> <legend>名字</legend> <select name="m" onchange="aaa(this.form)"> <option value="日本">日本</option> <option value="山田">山田</option> <option value="あああ">あああ</option> <option value="い">い</option> <option value="う">う</option> <option value="え">え</option> </select> </fieldset> <fieldset> <legend>名前</legend> <select name="n" onchange="aaa(this.form)"> <option value="太郎">太郎</option> <option value="花子">花子</option> <option value="ままま">ままま</option> <option value="みみ">みみ</option> <option value="む">む</option> </select> </fieldset> </form> <dl> <dt>名前</dt> <dd><p>日本太郎</p></dd> </dl> <dl> <dt>名前</dt> <dd><p>い花子</p></dd> </dl> <dl> <dt>名前</dt> <dd><p>山田太郎</p></dd> </dl> <script type="text/javascript"> function aaa(f){ var sn = f.n.value; var sm = f.m.value; var idID = document.getElementsByTagName('p'); var idLen = idID.length; for(i=0; i<idLen; i++){ var htm = idID[i].innerHTML; if(htm==sn+sm || htm.match(sn) && sm="指定なし" || sn="指定なし"){ alert("true"); }else{ alert("false"); } } } </script> </body> </html>

  • 複数の<option>と一致するものを表示するには

    サンプルで作ったコードは、 <select name="select1">の<option>、 <select name="select2">の<option>、 <select name="select3">の<option>で選び、その下にあるボタンを押すと、 <div class="sample_in">の<dd>タグ内と上記3つの項目に一致するにものだけを表示させたい と考え下記コードを作りました。しかし、select1とselect2は処理が行われません。 select3のみが処理されてしまいます。例えば・・・ 「1組,男子,おとなしい」を選んだ場合、サンプルでは一致するものは1つしかないので その親である<div class="sample_in">のみを表示させたいですが、 2組、女子でも表示の対象になり、一致するものが2つになってしまいます。 解決に役立つ様なプロパティやメソッドはないでしょうか。ヒントだけでもお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form name="myForm" action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="test0()"> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> </div> <script type="text/javascript"> function test0() { var div1 = document.getElementById('sample'); var div2 = div1.children; var index1 = document.myForm.select1.selectedIndex; var index2 = document.myForm.select2.selectedIndex; var index3 = document.myForm.select3.selectedIndex; var str1 = document.myForm.select1.options[index1].text; var str2 = document.myForm.select2.options[index2].text; var str3 = document.myForm.select3.options[index3].text; var ary = [str1, str2, str3]; for(m=0; m<ary.length; m++){ for(i=0, len1=div2.length; i<len1; i++){ var dd = div2[i].getElementsByTagName("dd"); for(j=0, len2=dd.length; j<len2; j++){ var ddText = dd[j].textContent; if( ary[m] == ddText ){ dd[j].parentNode.parentNode.style.display = ''; break; }else{ dd[j].parentNode.parentNode.style.display = 'none'; } } } } alert("エラーなし"); //動作確認用 } </script></body></html>

  • このサンプルコードが実行されない理由はなぜですか?

    セレクト1とセレクト2で絞り込みたいキーワードを指定し <input>の絞込によりstart()を実行させ、 <dd>のテキストに一致するもののみ表示させたく、 そのコードを作ってみましたが、正しく実行されません。 どこをどのようにしたら良いのでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> dl{ overflow:hidden; margin-bottom: 30px; } dd{ float:left; } dt{ float:left; clear:both; color:#f00; } </style> <script type="text/javascript"> function start() { var fs_a = document.myform.sel_a; var fs_b = document.myform.sel_b; var text_a = fs_a.options[fs_a.selectedIndex].text; var text_b = fs_b.options[fs_b.selectedIndex].text; var tag_dd = document.getElementsByTagName('dd'); var tag_dl = document.getElementsByTagName('dl'); for(var i = 0; i<=tag_dd.length; i++){ if(tag_dd.item[i].textContent == ans_a || tag_dd.item[i].innerText == ans_a){ tag_dl.style.display = ''; }else{ tag_dl.style.display = 'none'; } if(tag_dd.item[i].textContent == ans_b || tag_dd.item[i].innerText == ans_b){ tag_dl.style.display = ''; }else{ tag_dl.style.display = 'none'; } } } </script> </head> <body> <form name="myform"> <fieldset> <legend>セレクト1</legend> <select name="sel_a"> <option value="指定なし">指定なし</option> <option value="">あ</option> <option value="">い</option> <option value="">う</option> </select> </fieldset> <fieldset> <legend>セレクト2</legend> <select name="sel_b"> <option value="指定なし">指定なし</option> <option value="">え</option> <option value="">お</option> <option value="">か</option> </select> </fieldset> <input type="button" value="絞込" onclick="start()"> </form> <dl> <dt>セレクト1</dt><dd class="ddc">あ</dd> <dt>セレクト2</dt><dd class="ddc">か</dd> </dl> <dl> <dt>セレクト1</dt><dd class="ddc">い</dd> <dt>セレクト2</dt><dd class="ddc">お</dd> </dl> <dl> <dt>セレクト1</dt><dd class="ddc">う</dd> <dt>セレクト2</dt><dd class="ddc">え</dd> </dl> </body> </html>

  • メールフォームについて質問です。

    php初心者です。 メールフォームのチェックボックスの値をPOSTでキャッチしたあと表示がしたいのですがうまくいきません。 他のPOSTでキャッチした値も、最終的にforeachで回しています。 チェックボックスからの値のみ「array」と出力されます。 多次元配列の値を並列に表示したい場合、どのような処理の考え方があるのか教えていただきたいです。 送信元 <form action="entry.php" method="post"> <dl> <dt>氏名 <span class="red">[必須]</span></dt> <dd><input type="text" name="氏名"></dd> </dl> <dl> <dt>フリガナ <span class="red">[必須]</span></dt> <dd><input type="text" name="フリガナ"></dd> </dl> <dl> <dt>メールアドレス <span class="red">[必須]</span></dt> <dd><input type="text" name="メールアドレス" style="white-space:nowrap;"></dd> </dl> <dl> <dt>参加内容</dt> <dd><input type="checkbox" value="値1" name="参加内容[]">値1</dd> <dd><input type="checkbox" value="値2" name="参加内容[]">値2</dd> </dl> <dl> <dt>個人情報保護方針 <span class="red">[必須]</span><br /><input type="checkbox" class="checkbox" name="個人情報保護方針">同意する</dd> </dl> <p class="contactBt"><input type="submit" value="確認ページ" /></p> </form> 【送信先】 $_POSTSTRINGCODE = "EUC-JP"; $_THISFILESTRING = "UTF-8"; $_MYPOST = ""; foreach($_POST as $key=>$var) { //mb_convert_variables($_THISFILESTRING, $_POSTSTRINGCODE, $key); //smb_convert_variables($_THISFILESTRING, $_POSTSTRINGCODE, $var); $_MYPOST[$key] = $var; } <dl> <?php unset( $_MYPOST['個人情報保護方針'] ); foreach($_MYPOST as $key=>$var) { $key = strtr($key, $string_from, $string_to); if(get_magic_quotes_gpc()) $var = stripslashes($var); $var = htmlspecialchars($var); $OUT_var = ($var == "")?'&nbsp;&nbsp;':nl2br($var); print("<dt>".$key."</dt><dd>".$OUT_var."</dd>"); ?> <INPUT type="hidden" name="<?php echo $key ?>" value="<?php echo $var ?>"> <?php print("</dt></dd>\n"); } ?> </dl> 配列はこんな感じです。 array(6) { ["所属団体"]=> string(1) "a" ["氏名"]=> string(2) "aa" ["フリガナ"]=> string(3) "ア" ["メールアドレス"]=> string(15) "aaa@aaa.co.jp" ["ご参加内容"]=> array(2) { [0]=> string(51) "値1" [1]=> string(15) "値2" } ["個人情報保護方針"]=> string(2) "on" } このまま表示させると「array」として表示されてしまうため「値1」「値2」の値を表示 させるためループ内で色々やってみましたが、考え方自体少しつかめていません。   【現状】 所属団体 a 氏名 aa フリガナ ア メールアドレス aaa@aaa.co.jp ご参加内容 Array (この場所に「値1」「値2」が表示させるようにしたいです) どなたかご教授いただければと思います。 よろしくおねがいいたします。

    • ベストアンサー
    • PHP
  • phpの外部読み込みで半角ハテナがでる

    初歩的な質問内容なのかもしれませんが、宜しくお願いします。 phpの外部読み込みをすると半角ハテナがでてきてしまいデザインが崩れてしまいます。 下記がソースです。 【index.php】 <?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> <?php include("information.php"); ?> </body> </html> 【information.php】 <div id="infomation" class="scroll"> <h3><span class="red">更新履歴</span></h3> <dl> <dt>サイト作成開始<span class="new">New!!</span></dt> <dd>07年05月04日:管理人の閃きで作成。</dd> </dl> </div> 上記のように本当にシンプルなソースといいますか・・・ この感じでindex.phpにinformation.phpを呼び出すと 【index.php】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> ?<div id="infomation" class="scroll"> <h3><span class="red">更新履歴</span></h3> <dl> <dt>サイト作成開始<span class="new">New!!</span></dt> <dd>07年05月04日:管理人の閃きで作成。</dd> </dl> </div> </body> </html> という結果になり半角ハテナが入ってしまいます。 この現象がでるのはInternetExplorerとOperaでアクセスした場合です。 Firefoxの場合はこの現象は現れませんでした。 この半角ハテナを出なくする方法はありませんでしょうか? 宜しくお願いします。

    • ベストアンサー
    • PHP
  • $error配列がUndefined indexに

    簡単な入力フォームを初心者用の本に沿って作成しているのですが、 入力フォームのチェックで$error配列を使う部分で、 nameがblankかどうか確認する部分で、なぜかnameがNotice: Undefined indexとなってしまいます。 お詳しい方、下記のコードを見て何か原因をお分かりになりますでしょうか? <?php session_start(); if(!empty($_POST)){ if($_POST['name']==''){ $error['name']='blank'; } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Upload</title> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <p>次のフォームに必要事項をご記入下さい。</p> <dl> <dt>ニックネーム<span class="required">必須</span></dt> <dd><input type="text" name="name" size="35" maxlength="255" value="<?php echo htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8'); ?>" /> <?php if ($error['name'] == 'blank'): ?> <p class="error">* ニックネームを入力してください</p> <?php endif; ?> </dd> </dl> </form> </body> </html>

    • 締切済み
    • PHP
  • web初心者、会社hpに今日中にメールフォーム設置

    web初心者で、会社のホームページに今日中にメールフォームを 設置しなければならず、困っています。 テキストを見ながら簡単なフォームを作り、 テストとしてFTPにアップロードしました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <body><h1>お問い合わせ</h1> <form action="mailto:info@lacasatokyo.jp" method="post"> <dl><dt><label for="name">お名前</label></dt> <dd><input type="text" size="50" name="お名前" id="name" value="" /></dd> <dt><label for="email">Email</label></dt><dd><input type="text" size="50" name="Eメール" id="email" value="" /></dd> <dt><label for="comment">ご相談・ご質問</label></dt><dd><textarea name="ご相談・ご質問" id="comment" rows="7" cols="50"></textarea></dd></dl> <p><input type="submit" value="送信する" /></p> </form></body></html> フリーシェアのcgiを設置しようかとは考えましたが、 設置方法がいまいちわからず、強引にactionをmailtoで やってみましたが、すぐにメールソフトが立ち上がり、 通常のメール画面に・・・・ しかも、内容文が文字化けしている状態。 やはりcgiをつけなくては駄目なんでしょうか。 もしだめなら、初心者でも本当に簡単なcgi,(できれば無料) 教えていただけませんか。 社内で詳しいものがおらず、苦しんでいます。 どうか助けてください。

  • 【PHP】メールフォームの連動するセレクトボックス

    メールフォームを作っているのですが、 連動するセレクトボックスにおいて、 自動返信メールに内容が思った様に記載されません。 複数のチェックボックがあり、それぞれに連動して、 セレクトボックス1でサイズを選び、セレクトボックス2で数を選ぶようになっています。 ソースは最後に記載しますが、希望する返信メールの形は以下の通りです。 ーーーーーー現在ーーーーーー 【色 / サイズ / 数量】 S 1個 L 2個 S 3個 【料金】 (表示なし) ーーーーーー希望ーーーーーー 【色 / サイズ / 数量】 レッド S 1個 ブルー L 2個 イエロー S 3個 【料金】 S × 4個:600円 =1,800円 L × 2個:900円 =1,800円 ご教示のほど、お願い致します。 以下、ソースです。 <dt>色</dt> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="レッド">レッド</label> </dd> <dd> <select class="parent" name="size_01"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S:600円</option> <option value="L">L:900円</option> </select> </dd> <dd> <select class="children" name="number_01"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="ブルー">ブルー</label> </dd> <dd> <select class="parent" name="size_02"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S:600円</option> <option value="L">L:900円</option> </select> </dd> <dd> <select class="children" name="number_02"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> <以下、他の色が同様に続きます> <dt>料金</dt> <dd class="required"> <div id="result"> S:合計<span class="s maisu" name="sum_s_n" value="0">0</span>個 × 600円 = <span class="s kingaku" name="sum_s_p" value="">0</span>円<br> L:合計<span class="a maisu" name="sum_a_n">0</span>個 × 900円 = <span class="all kingaku" name="sum_all">0</span>

    • ベストアンサー
    • PHP
  • JQueryで$("dt span")クリック動作

    JQueryで$("dt span")をクリックしたときに 隣接するddタグの部分を表示させるには以下の記述を どのように修正すればよいのでしょうか? <html> <head> <style type="text/css"> dl { margin-bottom: 20px; } dd { display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("dt span").click(function(){ $("+dd",this).slideToggle(); }); }); </script> </head> <body> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> </body> </html> ご存じの方がおられましたらご回答をよろしくお願いします。

  • jQuery

    http://ascii.jp/elem/000/000/498/498710/ 上記サイトの6page目をみて、サイトに手順のあるjQueryアコーディオンを作成しようとおもったのですが、クリックすると2番目と3番目のddの部分が表示されるのですが、私のは最初からddの画像が 3枚とも表示されています。 私の作成したサイトのhtml、cssの記述は以下です。 また、jsフォルダにはjquery.animate-colors-min と jquery.easying.1.3と jquery.skitterと jquery-1.6.3.minが入っていて、jqueryskitterをダウンロードしたときのものです。それが間違いでしょうか? 上記サイトでは他のバージョンを使っているので、それをダウンロードしないとダメなのでしょうか? <script>の記述が間違っているのでしょうか? 何卒ご教授お願い致します。 ○html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メニューページ</title> <link href="all.css" rel="stylesheet" type="text/css" media="all" /> <script type="test/javascript" src="js/jquery-1.6.3.min.js"></script> $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); </head> <body> <dl> <dt>course</dt> <dd> <p><img src="image/menu1_03.jpg" width="728" height="515" /></p> </dd> <dt>a la calt</dt> <dd> <p><img src="image/menu2_03.jpg" width="763" height="560" /></p> </dd> <dt>waine</dt> <dd> <p><img src="image/manu3_03.jpg" width="763" height="561" /></p> </dd> </dl> </body> </html> ○CSS部分*他のhtmlページともリンクしているため、下記以外にも書いてあります *{ margin:0; padding:0; } a imag{ border:none; } dl{ width:763px; margin:50px auto; } dl dt{ background:#7CADB6; border-bottom:1px solid #FFFFFF; cursor:pointer; } dl dd{ border:1px solid #7CADB6; border-top:none; height:561px; }