1417608613 すみません、http://q.hatena.ne.jp/1417404436関連の質問です。

本当に、すみません。わたしの伝え方が悪かったと思ってます。
アイコンと内容が縦に表示されてしまいまして、調べてたどりついたのが
添付の内容になりました。m(_ _)m
調べたのですが、限界ですm(_ _)m
やりたいことは、添付のファイルで、最初このページを開いたときには
icon1.gifがリンクでリンクの内容
(トップページという名前のリンク名にしたいです)が、
icon1.gif icon2.gif icon3.gif icon4.gif icon5.gifの下(何行か開け)
に表示されicon2.gif icon3.gif icon4.gif icon5.gifもリンクです。
icon2.gif icon3.gif icon4.gif icon5.gifをそれぞれクリックすると
icon1.gifのリンクの内容と入れ替わるようにしたいです。
で、icon1.gif icon2.gif icon3.gif icon4.gif icon5.gifの下に表示
されるようにしたいです。
で又、icon1.gifをクリックすると
icon1.gif icon2.gif icon3.gif icon4.gif icon5.gifの下に
icon1.gifの内容が表示され、トップページとして、戻るようにしたいです。
大幅な変更で、本当にすみません、よろしくお願いします。m(_ _)m
わたしの考えかたが、まとまらないまま、迷惑かけましてすみません。
ご教示かた、よろしくお願いします。

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2014/12/08 15:46:25
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351

ポイント300pt

アイコン画像を5個並べて表示した下にそれぞれの内容を切り替えて表示するのですね?
(※デフォルトではアイコン1の内容を表示)
次のようにして試してみてください。

・HTML例(※リンクを設定する必要はありません。)

<div id="menu">
    <img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
</div>
<div id="content-box">
    <p class="info current">画像1の内容?</p>
    <p class="info">画像2の内容?</p>
    <p class="info">画像3の内容?</p>
    <p class="info">画像4の内容?</p>
    <p class="info">画像5の内容?</p>
</div>


・CSS例(※アイコン画像1の内容のみ表示して、他を非表示にするスタイルシートです。)

#content-box .info {
    display: none;
}
#content-box .current {
    display: block;
}

記述する順番は上記のままにしてください。


・jQuery例

$(function(){
    $( "#menu .menu-ico" ).click(function() {
        var imgid = $( this ).index();
        $("#content-box .info").hide();
        $("#content-box .info").eq(imgid).show();
    });
});


※ボックス要素を分けているので、そのままでもアイコン画像の下に余白ができるはずですが、好みの間隔に調整したい場合は、以下のスタイルを追加で記述してみてください。

#menu {
    margin-bottom: 15px; // ここで好きな数値を指定
}



【※ 追記 ※】

アイコンの下に、同一ページで社員の座席表がでて、名前をリンク
させてクリックすると、その下に紹介が、


前の質問の補足メッセージを確認して、変更したコードを追記します。

・HTML例

<div id="menu">
    <img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
</div>
<div id="content-box">
    <div class="info current">
        <h3>画像1の内容?</h3>
        <table id="seating-plan" border="1" cellspacing="0" cellpadding="3">
            <tr>
                <td class="a">A</td><td class="b">B</td><td class="c">C</td>
            </tr>
            <tr>
                <td class="d">D</td><td class="e">E</td><td class="f">F</td>
            </tr>
        </table>
        <div id="profile">
            <table class="a"><tr><td>Aのプロフィール</td></tr></table>
            <table class="b"><tr><td>Bのプロフィール</td></tr></table>
            <table class="c"><tr><td>Cのプロフィール</td></tr></table>
            <table class="d"><tr><td>Dのプロフィール</td></tr></table>
            <table class="e"><tr><td>Eのプロフィール</td></tr></table>
            <table class="f"><tr><td>Fのプロフィール</td></tr></table>
        </div>
    </div>
    <div class="info">画像2の内容?</div>
    <div class="info">画像3の内容?</div>
    <div class="info">画像4の内容?</div>
    <div class="info">画像5の内容?</div>
</div>

※座席表のtableタグを配置する為、pからdivに変更しています。(W3Cに沿った変更です。)
※アイコン画像1の内容にしましたが、アイコン2~アイコン5のどのアイコン画像の内容にしても大丈夫です。

・CSS例

#content-box .info {
    display: none;
}
#content-box .current {
    display: block;
}
#profile table {
    display: none;
}


・jQuery例

$(function(){
    $( "#menu .menu-ico" ).click(function() {
        var imgid = $( this ).index();
        $("#content-box .info").hide();
        $("#content-box .info").eq(imgid).show();
        $("#profile table").hide();
    });
    $( "#seating-plan td" ).click(function() {
        var pid = $( this ).attr("class");
        $("#profile table").hide();
        $("table." + pid).show();
    });
});


【※ 追記 ※】


画像や社員名にマウスオーバーした時のカーソルの形状をリンクと同じにする記述を追加したスタイルシートです。

#content-box .info {
    display: none;
}
#content-box .current {
    display: block;
}
#profile table {
    display: none;
}
/* この下を追加していますが、上に追加しても大丈夫です */
#menu .menu-ico,
#seating-plan td {
    cursor: pointer;
}


・トップページ > スタイルシートリファレンス > cursor
http://www.htmq.com/style/cursor.shtml

id:rouge_2008

質問の添付画像で確認したHTMLコードについてですが、「class」というHTML要素はありませんので、一応念の為サイトや持っている本などで確認しながら使うようにするといいです。
HTML5でしたら次のページを参考にしてみてください。

・トップページ > HTML5リファレンス (HTMLクイックリファレンス)
http://www.htmq.com/html5/index.shtml

・Home HTML5 要素一覧 [ABC順] (TAG index Webサイト)
http://www.tagindex.com/html5/elements/abc.html

2014/12/04 01:37:06
id:meichi

この度は、本当にありがとうございます。m(_ _)m
いま、Wifiが使えるところにいます。

しつこく、コメントで、お願いしまして、申し訳ありませんでした。

一応、PDFまでは、できました。。。。。

まだ、質問があるのですが、、、、申し訳ないので、いったん質問を
終了します。

いまから、調べてみて、ギリギリの時間まで、がんばってみます。
このあと、すいません、予定があるものですから、、、

この場所をでる前に、質問をたてさせていただきます。(本当に勝手ですいません)

CSSとJquery(あってますか・・・)の入門の本を、図書館で
借りました。今日は、読む時間は、なかったのですが。。。。

今回の仕様は、かなり高度な、内容だと本から、思いました。
今度こそは、教えていただきながらも、今後理解して、身につけたい
と思います。

また、皆様のお力を借りたいと思います。よろしくお願いします。

2014/12/08 15:41:21

その他の回答0件)

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351ここでベストアンサー

ポイント300pt

アイコン画像を5個並べて表示した下にそれぞれの内容を切り替えて表示するのですね?
(※デフォルトではアイコン1の内容を表示)
次のようにして試してみてください。

・HTML例(※リンクを設定する必要はありません。)

<div id="menu">
    <img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
</div>
<div id="content-box">
    <p class="info current">画像1の内容?</p>
    <p class="info">画像2の内容?</p>
    <p class="info">画像3の内容?</p>
    <p class="info">画像4の内容?</p>
    <p class="info">画像5の内容?</p>
</div>


・CSS例(※アイコン画像1の内容のみ表示して、他を非表示にするスタイルシートです。)

#content-box .info {
    display: none;
}
#content-box .current {
    display: block;
}

記述する順番は上記のままにしてください。


・jQuery例

$(function(){
    $( "#menu .menu-ico" ).click(function() {
        var imgid = $( this ).index();
        $("#content-box .info").hide();
        $("#content-box .info").eq(imgid).show();
    });
});


※ボックス要素を分けているので、そのままでもアイコン画像の下に余白ができるはずですが、好みの間隔に調整したい場合は、以下のスタイルを追加で記述してみてください。

#menu {
    margin-bottom: 15px; // ここで好きな数値を指定
}



【※ 追記 ※】

アイコンの下に、同一ページで社員の座席表がでて、名前をリンク
させてクリックすると、その下に紹介が、


前の質問の補足メッセージを確認して、変更したコードを追記します。

・HTML例

<div id="menu">
    <img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
</div>
<div id="content-box">
    <div class="info current">
        <h3>画像1の内容?</h3>
        <table id="seating-plan" border="1" cellspacing="0" cellpadding="3">
            <tr>
                <td class="a">A</td><td class="b">B</td><td class="c">C</td>
            </tr>
            <tr>
                <td class="d">D</td><td class="e">E</td><td class="f">F</td>
            </tr>
        </table>
        <div id="profile">
            <table class="a"><tr><td>Aのプロフィール</td></tr></table>
            <table class="b"><tr><td>Bのプロフィール</td></tr></table>
            <table class="c"><tr><td>Cのプロフィール</td></tr></table>
            <table class="d"><tr><td>Dのプロフィール</td></tr></table>
            <table class="e"><tr><td>Eのプロフィール</td></tr></table>
            <table class="f"><tr><td>Fのプロフィール</td></tr></table>
        </div>
    </div>
    <div class="info">画像2の内容?</div>
    <div class="info">画像3の内容?</div>
    <div class="info">画像4の内容?</div>
    <div class="info">画像5の内容?</div>
</div>

※座席表のtableタグを配置する為、pからdivに変更しています。(W3Cに沿った変更です。)
※アイコン画像1の内容にしましたが、アイコン2~アイコン5のどのアイコン画像の内容にしても大丈夫です。

・CSS例

#content-box .info {
    display: none;
}
#content-box .current {
    display: block;
}
#profile table {
    display: none;
}


・jQuery例

$(function(){
    $( "#menu .menu-ico" ).click(function() {
        var imgid = $( this ).index();
        $("#content-box .info").hide();
        $("#content-box .info").eq(imgid).show();
        $("#profile table").hide();
    });
    $( "#seating-plan td" ).click(function() {
        var pid = $( this ).attr("class");
        $("#profile table").hide();
        $("table." + pid).show();
    });
});


【※ 追記 ※】


画像や社員名にマウスオーバーした時のカーソルの形状をリンクと同じにする記述を追加したスタイルシートです。

#content-box .info {
    display: none;
}
#content-box .current {
    display: block;
}
#profile table {
    display: none;
}
/* この下を追加していますが、上に追加しても大丈夫です */
#menu .menu-ico,
#seating-plan td {
    cursor: pointer;
}


・トップページ > スタイルシートリファレンス > cursor
http://www.htmq.com/style/cursor.shtml

id:rouge_2008

質問の添付画像で確認したHTMLコードについてですが、「class」というHTML要素はありませんので、一応念の為サイトや持っている本などで確認しながら使うようにするといいです。
HTML5でしたら次のページを参考にしてみてください。

・トップページ > HTML5リファレンス (HTMLクイックリファレンス)
http://www.htmq.com/html5/index.shtml

・Home HTML5 要素一覧 [ABC順] (TAG index Webサイト)
http://www.tagindex.com/html5/elements/abc.html

2014/12/04 01:37:06
id:meichi

この度は、本当にありがとうございます。m(_ _)m
いま、Wifiが使えるところにいます。

しつこく、コメントで、お願いしまして、申し訳ありませんでした。

一応、PDFまでは、できました。。。。。

まだ、質問があるのですが、、、、申し訳ないので、いったん質問を
終了します。

いまから、調べてみて、ギリギリの時間まで、がんばってみます。
このあと、すいません、予定があるものですから、、、

この場所をでる前に、質問をたてさせていただきます。(本当に勝手ですいません)

CSSとJquery(あってますか・・・)の入門の本を、図書館で
借りました。今日は、読む時間は、なかったのですが。。。。

今回の仕様は、かなり高度な、内容だと本から、思いました。
今度こそは、教えていただきながらも、今後理解して、身につけたい
と思います。

また、皆様のお力を借りたいと思います。よろしくお願いします。

2014/12/08 15:41:21
id:meichi

大変お世話になります。m(_ _)m

返信が遅くなりまして、すいませんでした。

いまからやってみます。

大変すみませんが、やってみてわからない時は自分でも調べてみますが、

どうしても、というときは、また教えていただけますでしょうか。

よろしくお願いします。m(_ _)m

  • id:meichi
    すみません、cssはエラーなく思ったように表示されるのですが・・・・
    jQueryでエラーが出ます。

    http://learn.jquery.com/about-jquery/how-jquery-works/

    では、<body></body>の間にスクリプトを書くようになってます。
    これで、あってますでしょうか。

    あと、リンクが動かないです。

    いま、wifiが使えるところでやってるのですが・・・もうそろそろPCの電源が
    切れそうです。もうしこし、がんばってみます。

    なんて・・・コピペもできないなんて・・・m(_ _)m

    いまの、ソースは下記です。
    ---------------------------------------------------------------
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.0.1 Trial for Windows">
    <style>
    #content-box .info {
    display: none;
    }
    #content-box .current {
    display: block;
    }
    </style>

    <title>営業部</title>
    </head>
    <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
    $(function(){
    $( "#menu .menu-ico" ).click(function() {
    var imgid = $( this ).index();
    $("#content-box .info").hide();
    $("#content-box .info").eq(imgid).show();
    });
    });
    </script>
    <p style="font-size : medium;"><b><i><font SIZE="5">営業部のホームページへようこそ!!</font></i></b><br>
    </p>
    <div id="menu"><img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
    <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
    </div>
    <div id="content-box">
    <p class="info current">画像1の内容?</p>
    <p class="info">画像2の内容?</p>
    <p class="info">画像3の内容?</p>
    <p class="info">画像4の内容?</p>
    <p class="info">画像5の内容?</p>
    </div>
    </body>
    </html>
    -------------------------------------------------------------
  • id:rouge_2008
    可能な限りheadタグ内に記述するようにした方がいいです。(※jQueryのサイトでbodyタグ内での説明になっている理由は分かりませんが、サイト内は通常通りheadタグ内に記述しているようです。アクセス解析等、一部ページ下に記述している場合もありますが、例外的対処と考えてください。)

    jQueryライブラリ(「jquery.js」あるいは「jquery.min.js」)を読み込んでいますか?
    以下の記述では、HTMLファイルと同階層に「jquery.js」が配置されていなければなりません。

    <script src="jquery.js"></script>

    ・Download jQuery
    http://jquery.com/download/

    ※あるいは同階層に配置する代わりに、以下のコードでCDNのライブラリを読み込んで利用しても大丈夫です。

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  • id:meichi
    大変、お世話になります。本当にありがとうございます。m( )m
    返信が、いつも遅くなりすいません。

    実は、昨日、スマホの電源が、切れて、コメントに気づきませんでした。(メールで通知)

    今日は、PCは、雨が強いので、すみません。会社にはもっていかないです。

    このあと、仕事に行きますので、帰ってきてから、やります。

    #うちの担当は、まだビルダーが来ていないこともあり、勤務中に、すると
     おこられます。すいません、自分としては、厳しいとおもってるのですが・・・

    がんばります。よろしくお願いします。。。。
  • id:meichi
    すみません、いろいろ用事がありまして、いまの時間になりました。

    いまからします。
  • id:meichi
    あれこれ、本当に申し訳ないのですが・・・・・

    とりあえず、動くようになりました。ありがとうございます。

    ですけれど、画像のリンク(例:icon1.gif)等が、「手のひら」
    (これは禁句かもしれませんが)
    にならず、素人の方が、ナビゲーションするにはわからないのでは
    ないでしょうか。

    調べていますが、、、、いっつもですが・・・答えにたどりつかないです。m(_ _)m

    大幅な変更が必要なのでしょうか・・・

    よろしくお願いします。
  • id:rouge_2008
    回答に追記しました。
    CSSを少し追加すると対応可能です。
  • id:meichi
    本当に、ありがとうございます。

    昨日は、夜の12時でアウトでした。m(_ _)m

    今日も、いろいろあり、すみません、いまからします。
    わからないところは、できるだけ、まず自分から調べます。
  • id:meichi
    ありがとうございます。

    教えていただいて、一発で、うまくいったのは今回始めてです。

    あとは、文章にPDFのリンクをつくって、やってみます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません