ページ内移動で現在いる場所のメニューをハイライトさせたいのですが
今のjavascriptがフルパスでの設定方法になっています。
これをIDで指定したいです。
ご教授願いいたします。

html
1<nav id="menu-wrap">
2  <ul id="menu">
3    <li><a href="#content_first">Contents１</a></li>
4    <li><a href="#content_second">Contents２</a></li>
5    <li><a href="#content_third">Contents３</a></li>
6    <li><a href="#content_fourth">Contents４</a></li>
7    <li><a href="#content_etc">Contents５</a></li>
8  </ul>
9</nav>
10

javascript
1<script>
2     var url = window.location;
3        $('#menu a[href="'+url+'"]').addClass('active');
4</script>

css
1.active{color:red;}

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず

var url = window.hash

ですね。
なにをトリガーに色を変えるのでしょうか？
load時だけでよいのですか？
クリック時に変えるのであればわざわざhrefをしらべる必要もないので・・・

追記

load時のチェックを１度だけして、あとはクリックしたところがactiveになればいいのでは？

CSS
1#menu-wrap{position:fixed;}
2.contents{height:500px;}
3.active{background-color:red;}
4

javascript
1$(function(){
2  $('#menu a[href="'+location.hash+'"]').addClass('active');
3  $('#menu a').on('click',function(){
4    $('#menu a').removeClass('active');
5    $(this).addClass('active');
6  });
7});

スクロールチェック

この際なのでスクロールをチェックしてみますか？

javascript
1$(function(){
2  var pre_pos=0;
3    var this_pos = $(window).scrollTop();
4    var pre_id = get_id(pre_pos);
5    var this_id = get_id(this_pos);
6    if (pre_id !== this_id) {
7      /* 以下hashを変更するよう修正*/
8      if(this_id!==null){
9        location.hash=this_id.substr(1,this_id.length);
10        $(window).scrollTop(this_pos);
11      }else{
12        location.hash="";
13      };
14      $('#menu a').removeClass("active");
15      $('[href="' + this_id + '"]').addClass("active");
16    }
17    pre_pos = this_pos;
18  });
19  function get_id(pos){
20    var list=[
21      {
22        "min":$('#content_first').offset().top,
23        "max":$('#content_first').next().offset().top-1,
24        "id":'#content_first',
25      },
26      {
27        "min":$('#content_second').offset().top,
28        "max":$('#content_second').next().offset().top-1,
29        "id":'#content_second',
30      },
31      {
32        "min":$('#content_third').offset().top,
33        "max":$('#content_third').next().offset().top-1,
34        "id":'#content_third',
35      },
36      {
37        "min":$('#content_fourth').offset().top,
38        "max":$('#content_fourth').next().offset().top-1,
39        "id":'#content_fourth',
40      },
41      {
42        "min":$('#content_etc').offset().top,
43        "max":$('#content_etc').offset().top+9999,
44        "id":'#content_etc',
45      },
46      ];
47    var arr=list.filter(function(x){return x.min<=pos && x.max>=pos;});
48    if(typeof arr[0]=="undefined") return null;
49    return arr[0].id;
50  }
51});

HTML
1<nav id="menu-wrap">
2  <ul id="menu">
3    <li><a href="#content_first">Contents1</a></li>
4    <li><a href="#content_second">Contents2</a></li>
5    <li><a href="#content_third">Contents3</a></li>
6    <li><a href="#content_fourth">Contents4</a></li>
7    <li><a href="#content_etc">Contents5</a></li>
8  </ul>
9</nav>
10<div class="contents" id="content_first">1</div>
11<div class="contents" id="content_second">2</div>
12<div class="contents" id="content_third">3</div>
13<div class="contents" id="content_fourth">4</div>
14<div class="contents" id="content_etc">5</div>
15

調整版

以下ベタに貼ります
挙動確認下さい

HTML
1<html>
2<head>
3<style>
4#menu-wrap {
5  position: fixed;
6}
7#menu{
8text-align: left;
9  display: flex;
10margin: 0px;
11  padding-left: 20px;
12}
13#menu li {
14  display:inline;
15}
16#menu li:last-child a{
17  border-right:1px solid #000000;
18}
19#menu a:hover{
20  background-Color:yellow;
21}
22#menu a{
23  width: 80px;
24  border:1px solid #000000;
25  border-right:0px;
26  padding-left: 5px;
27  padding-right: 5px;
28  display: inline-block;
29  text-decoration:none;
30}
31.contents {
32  height: 500px;
33}
34.active {
35  background-color: red;
36}
37</style>
38<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
39<script>
40$(function() {
41  var list=[];
42  ['#content_first',
43   '#content_second',
44   '#content_third',
45   '#content_fourth',
46   '#content_etc'
47   ].map(function(x){
48     list.push({
49       "min": $(x).offset().top,
50       "max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()),
51       "id": x,
52     })});
53  var pre_pos = 0;
54  $(function() {
55    $('#menu a[href="' + location.hash + '"]').addClass('active');
56    $('#menu a').on('click', function() {
57      $('#menu a').removeClass('active');
58      $(this).addClass('active');
59    });
60  });
61
62  $(document).on('scroll', function() {
63    var this_pos = $(window).scrollTop();
64    var pre_id = get_id(pre_pos);
65    var this_id = get_id(this_pos);
66    if (pre_id !== this_id) {
67      if(this_id!==null){
68        location.hash=this_id.substr(1,this_id.length);
69        $(window).scrollTop(this_pos);
70      }else{
71        location.hash="";
72      };
73      $('#menu a').removeClass("active");
74      $('[href="' + this_id + '"]').addClass("active");
75    }
76    pre_pos = this_pos;
77  });
78  function get_id(pos) {
79    var arr = list.filter(function(x) {
80      return x.min <= pos && x.max >= pos;
81    });
82    if (typeof arr[0] == "undefined") return null;
83    return arr[0].id;
84  }
85});
86</script>
87</head>
88<body>
89<nav id="menu-wrap">
90  <ul id="menu">
91    <li><a href="#content_first">Contents1</a></li>
92    <li><a href="#content_second">Contents2</a></li>
93    <li><a href="#content_third">Contents3</a></li>
94    <li><a href="#content_fourth">Contents4</a></li>
95    <li><a href="#content_etc">Contents5</a></li>
96  </ul>
97</nav>
98<div class="contents" id="content_first">1</div>
99<div class="contents" id="content_second">2</div>
100<div class="contents" id="content_third">3</div>
101<div class="contents" id="content_fourth">4</div>
102<div class="contents" id="content_etc">5</div>
103</body>
104</html>

投稿2017/11/08 01:09

編集2017/11/09 05:04

yambejp

総合スコア114843

KEJ

2017/11/08 01:58

回答ありがとうございます。説明がかなり不足しておりました。 1ページサイトの一番上にメニューバーを固定しておりページ内をスクロールで移動できるようにしてあります。そして今見えているコンテンツ部分のメニューナビをハイライトさせたいです。

yambejp

2017/11/08 02:17

追記しておきました。ちょっと考え方を整理したほうがいいかもしれません

KEJ

2017/11/08 02:23

ご丁寧にありがとうございます。メニューナビをクリックして移動した時にハイライトするようになったのですがその状態からスクロールして違うコンテンツに移動するとクリックして移動したところがずっとハイライトされております。クリック時だけではなくスクロールして移動した時にもハイライトが移動するようにしたいです。

yambejp

2017/11/08 02:48

> スクロールして移動した時スクロールするときもハッシュが変化するのでしょうか？

KEJ

2017/11/08 19:39

返信が遅くなりましたがやりたい事を解説しているサイトがありました。 https://www.tam-tam.co.jp/tipsnote/sample/ishikawa/140528/ ただ自分のサイトに導入すると他のコードと競合するのかスクロールがバウンドしてしまいます。これをもっとシンプルに書くことは可能でしょうか？ご教授いただけると幸いです。

KEJ

2017/11/08 19:41

追記：スクロールがバウンドとはメニューナビをクリックして移動した際にコンテンツの始まりより少し下に降りてから定位置に戻ってきます。

yambejp

2017/11/09 01:41

スクロールでhashを変えるのはラグで挙動がおかしくなりそうですねとりあえずoffset位置でメニューのactiveを変更する処理を追記してみました

KEJ

2017/11/09 01:55

返信ありがとうございます。 https://jsfiddle.net/keiju/q7a4w0xs/ ここでコードを入力してみたのですが動きません... 私の入力方法が間違っているのでしょうか。何もかも無知で申し訳ありませんがご教授お願いいたします。

yambejp

2017/11/09 02:17

ひとつはjQueryライブラリを読み込んでいないかもまたフレーム系の構成だと$(window).scrollTop()がきちんとよめないかもしれません。テストサイトではなくご自身の環境でやってうまくいきませんか？

KEJ

2017/11/09 02:28

.active{ background: #a9cd36; } 上記にして試したのですがナビをクリックしてページ内移動した時にハイライトするのですがクリックしたところがずっとハイライトしていてスクロールして違うエリアに入っても変化しませんでした。

yambejp

2017/11/09 03:47

おそらく別のライブラリじゃjsを併用していますよね？ a[href="'+location.hash+'"]をチェックするようなプログラムを書けば hashの値をみてactiveを切り替えてしまうので、つねにhashのところに activeが残ると思います。私の例示はhashにかかわらず常にwindowの先頭位置にあるdivを拾っていますちょっと調整したほうがよいですか？

yambejp

2017/11/09 03:55

スクロールに伴い、hashも変更するように修正しておきました

KEJ

2017/11/09 04:29

他のjsと競合しているのかうまく行きません。今使っているものを一応書いておきます。もしこれで原因がわかったらご教授お願いいたします。また、親切に色々教えてくださってとても感謝しております。 // JavaScript Document /*$(function(){ $('#menu a[href="'+location.hash+'"]').addClass('active'); $('#menu a').on('click',function(){ $('#menu a').removeClass('active'); $(this).addClass('active'); }); }); $(function(){ var pre_pos=0; $(document).on('scroll',function(){ var this_pos=$(window).scrollTop(); var pre_id=get_id(pre_pos); var this_id=get_id(this_pos); if(pre_id!==this_id){ $('#menu a').removeClass("active"); $('[href="'+this_id+'"]').addClass("active"); } pre_pos=this_pos; }); function get_id(pos){ var list=[ { "min":$('#content_first').offset().top, "max":$('#content_first').next().offset().top-1, "id":'#content_first', }, { "min":$('#content_second').offset().top, "max":$('#content_second').next().offset().top-1, "id":'#content_second', }, { "min":$('#content_third').offset().top, "max":$('#content_third').next().offset().top-1, "id":'#content_third', }, { "min":$('#content_fourth').offset().top, "max":$('#content_fourth').next().offset().top-1, "id":'#content_fourth', }, { "min":$('#content_etc').offset().top, "max":$('#content_etc').offset().top+9999, "id":'#content_etc', }, ]; var arr=list.filter(function(x){return x.min<=pos && x.max>=pos;}); if(typeof arr[0]=="undefined") return null; return arr[0].id; } });*/ //メニューをトップで固定 $(function(){ var box = $("#menu-wrap"); var boxTop = box.offset().top; $(window).scroll(function () { if($(window).scrollTop() >= boxTop) { box.addClass("fixed"); $("body").css("margin-top","8vw"); } else { box.removeClass("fixed"); $("body").css("margin-top","0px"); } }); }); $(function(){ $('#menu img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); //サイドメニュー固定 jQuery(function($) { var nav = $('.nav_side'), offset = nav.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top - 100) { nav.addClass('fixed_side'); } else { nav.removeClass('fixed_side'); } }); }); //ヘッダー高さ分ずらす $(function () { var headerHight = 80; //ヘッダの高さ $('a[href^=#]').click(function(){ var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす $("html, body").animate({scrollTop:position}, 550, "swing"); return false; }); }); //ハンバーガーメニューのトリガー $(function(){ $('.menu-trigger').on('click',function(){ $(this).toggleClass('active'); $('.g-nav').slideToggle(); }); }); //ニュースのスライド $(function(){ $(".bxSlider").bxSlider({ mode: 'fade', auto: true, speed: 500, pager: false, }); }); //上に戻るスクロール $(document).ready(function() { var pagetop = $('.pagetop'); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); //ハンバーガーメニューが開いている時背景を固定 $(function(){ var state = false; var scrollpos; $('.menu-trigger').on('click', function(){ if(state == false) { scrollpos = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollpos}); $('.g-nav').addClass('open'); state = true; } else { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , scrollpos ); $('.g-nav').removeClass('open'); state = false; } }); }); //ポップアップアニメーション $(window).scroll(function() { $('.animatedElement').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+800) { $(this).addClass("fadeIn"); } }); });

yambejp

2017/11/09 05:05

徐々に複雑になっているのでどこで詰まっているかよくわかりません調整版をベタにはっておきましたので、コピペして挙動を確認して下さい。うまくいくならここから調整ということで

KEJ

2017/11/09 06:42

調整版が正常に動くことは確認できました。しかし、私のサイトに入れると何かと競合しているようでうまく動きませんでした。今使っているスクリプトを外していき原因を調べてみます。長時間お付き合い頂きましてありがとうございました。また、調整で質問等するかもしれませんがその時は何卒宜しくお願いいたします。

yambejp

2017/11/09 07:10

了解です。興味深い案件なので、なにかあったら調整しますので補足入れておいて下さい

行動規範の内容に同意します