質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.04%

現在表示されているコンテンツにクラスを付与したいのですが、どう記述すれば良いのでしょうか

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,034

banbbanb0814

score 9

▼やりたい事
http://blog.beat8.info/samples/13091801.html
(参照ページ)
↑ナビ(li )ではなく、表示されているコンテンツ(box)にクラスを付けたい。

▼試した事
下記ページ【navカレント表示】の箇所を参照して
http://blog.beat8.info/jquery/53/
下記書き換え
「.nav li a」→「.box」
「.nav li:nth-child」→「.box:nth-of-type」

▼結果
途中まではきちんと表示されているコンテンツに、クラスが付与されていたが
途中から表示されていないコンテンツにクラスが付与されたりと上手く動作しなかった

所々何が書いてあるのかも良くわからない状態で何が不要で何が不足しているのかさっぱり解らない状態です。。
すみませんがどなたかご教示お願いいたします。

==下記追記====================
実際に記述したソース

▼html

<div class="contentsBox">
<div class="box current">割愛</div>
<div class="box">割愛</div>
<div class="box">割愛</div>
</div>


.boxは全部で10個あります。

▼js

$(function() {
    //カレント表示
    var box = new Array;
    var current = -1;
    $(".contentsBox .box").each(function(i) {
        box[i] = $(this).offset().top;
    });

    // カレント表示の変更
    function changeBox(secNum) {
        if (secNum != current) {
            current = secNum;
            secNum2 = secNum + 1;
            $(".contentsBox .box").removeClass("current");
            $(".contentsBox .box:nth-of-type(" + secNum2 +")").addClass("current");
        }
    }

    // scroll量での判定
    function scrollCheck() {
        var st = $(window).scrollTop() + 30;
        for (var i = box.length - 1 ; i >= 0; i--) {
            if (st > box[i]) {
                changeBox(i);
                break;
            }
        };

    }

    // scrollでのカレント表示をbind
    $(window).bind("load scroll", scrollCheck);

});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • masayoshi0222

    2017/05/18 14:42

    あなたが書いたソースコードがどれかわかるように追記して頂くと返答しやすいです。

    キャンセル

  • banbbanb0814

    2017/05/18 14:58

    すみません!!ありがとうございます。追記したのでご確認お願いいたします。

    キャンセル

  • kei344

    2017/05/18 20:25

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • banbbanb0814

    2017/05/18 22:36 編集

    ご指摘ありがとうございます!!初めての投稿で知らないことばかりなのでとても助かります!

    キャンセル

回答 4

+2

うーん、クラスは「box」というクラスがついているので、
やりたいことは「boxクラスに色替えなどの効果をつけたい」ということですかね?
(画面外にあるboxの色替えをしても、あまり面白くないんじゃないかなぁ…)

参考にされているサイトでは、
マウスオーバーした部分の色替えを行っているのでCSSでいけますが、
もし上記のような「左のメニューをマウスオーバーしたら、右のコンテンツの色を変えたい」
などということでありましたら、
liとboxのひとつひとつにidをつけることと、
jQueryなどJavascriptの知識が必要になりますが、大丈夫でしょうか。

というのは質問の内容から、かなりの初学者とお見受けしまして、
ちょっと頭の中で実現方法を組み立ててみたのですが、
初心者にこれわかるかなぁ、というような代物になったためで。

考え方としては

  1. 任意のliにマウスオーバーする(Mouseoverイベント発生)
  2. 対応するidのboxの色を変更する

という流れになり、これをboxの数だけ
Javascriptで用意することになります。
(変数でサボることも可能ですが、さらに混乱を招くといけないので)
Javascript使ってみよう、という勇気をお持ちでしたら、お声がけください。

追記----------------
コード見ました。
うーん、やはりこのJavascript全体で何をしているか、よくお分かりになってないんじゃないかな…
と思います。
ざっくり言うと左のナビボタンを押すと画面がスクロールして、対応する部分に飛ぶというJavascriptですが
これを書き換えても(ナビボタンの数を増やすとかでなければ)あまり良いことは起こらないと思いますが…
少なくともこのJavascriptでは色は変わりませんが、ナビボタンを消したいとかですか?
何を実現したいのかがよくわからなくなってきました。

追記(20170519)----------------
ごく簡単に、jQueryで再現できるかな?と思ったので(試してませんが)書いてみました。
「前へ」ボタンのid = mae、「次へ」ボタンのid = tsugi、
右コンテンツのid = contents 、
右コンテンツの中身の高さ = 100pixel (ちっちゃ)の設定となっております。

// 右コンテンツの高さを取得
  var currentheight = #contents.scrollTop();

// 「前へ」ボタンの設定
  $('#mae').click(function(){
  #contents.scrollTop(currentheight - 100);
});

// 「次へ」ボタンの設定
  $('#tsugi').click(function(){
  #contents.scrollTop(currentheight + 100);
});


これで、先頭のコンテンツを参照しているときは「前へ」ボタンを、
最後のコンテンツを参照しているときは「次へ」ボタンを
.hiddenプロパティで隠せばそれなりに見えるのではないかなと。

試していないので動かなかったらごめんなさい。
「思ってたのと違う」という苦情は受け付けますので…

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/18 22:56 編集

    ご回答ありがとうございます!
    そうなんです。。恥ずかしながらjsの知識が乏してく大変苦戦しております。。
    実際にやりたいことは表示されているコンテンツに連動して「前へ/次へ」ボタンのリンクを変更させたいのです。
    少ない知識のなか絞りだしたのが、
    表示させているコンテンツに対して.next()と.prev()を指定して、前後のコンテンツのidを.attr()で書き換えたらどうか・・・というものでした。

    もっと適切な方法があればご教示いただきたいです。。。

    どうぞよろしくお願いいたします。

    キャンセル

  • 2017/05/19 09:17

    そうすると、左側に出ているのはサンプルのようなナビボタンではなくて、
    「前へ」「次へ」の2つのボタンだけ、という理解で良いでしょうか?
    で、右のコンテンツがそれに対応して1つずつ繰り上がったり繰り下がったりする。
    実現されたいことがつかめてきたようです。
    IDの指定に変数使った方が楽なのではないかな、というのがコメントを読んだ第一印象ですが…
    私なりの回答をまとめて、また書き込みます。

    キャンセル

  • 2017/05/19 14:18

    追記確認いたしました!
    ありがとうございます!
    こちらも試してみます!!

    キャンセル

check解決した方法

0

今回つまずいていた不具合はページ内にて画像が使用されていたのでoffset()の値がうまく取得できていなかったのが原因でした。全て読み込んでから作動するように設定しなおしたら問題なく動くようになりました。
ご回答いただいた方、ありがとうございましたm(__)m

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

// カレント表示の変更 
function changeBox(secNum) { 
   if (secNum != current) { 
      current = secNum; 
      secNum2 = secNum + 1; 
      calendar.removeClass("current"); 
      $(".contentsBox .box:nth-of-type(" + secNum2 +")").addClass("current"); 
   } 
}


いきなりcalenderが出てきてますが、これはどこで定義しているのでしょうか?
removeClass("current")はcurrentクラスを削除するという関数になります。
どこかのソースのコピペでcalenderと記述しているのでしたら、そこを適切なものに書き換えてあげるとやりたいことができるようになるんじゃないかと思われます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

http://jsdo.it/masayoshi/IHW4

こちらにやりたいことを記述しておきました。
参考にしてみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/18 22:37

    ありがとうございます!!
    こちらで明日試してみます!!

    キャンセル

  • 2017/05/19 14:13

    昨日はありがとうございました!
    こちらで試して見たのですが、やはり途中でクラスを付けたいコンテンツがずれてしまいました。。。
    ただズレてしまうのは、androidのクロムでベージのリロードをかけた時のみです。他(iphoneのSafari、PC、androidの標準ブラウザ)のは大丈夫でした。
    (iphoneのクロムは検証し忘れました。。後ほど検証してみます。)
    また、androidのクロムでもベージをリロードしなければ、きちんと機能しました。
    何が原因なのかよくわからず。。。
    別途追従ナビをセットしているのですが、そちらも同環境配下でタイミングがズレてしまいます。
    スクロール系のメソッドがいけないのでしょうか??

    ぜひご教示いただければと思います。
    すみませんが、どうぞよろしくお願いいたします。

    キャンセル

  • 2017/05/19 14:34

    新しいソースコードの提示をお願いいたします。
    変更になった内容を確認してみないとご返答は難しいです。

    キャンセル

  • 2017/05/30 15:55

    ご連絡おそくなってしまいすみません。。
    こちらですがあの後すぐ解決いたしました。
    いろいろと教えていただきありがとございましたm(__)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる