縦スクロールの表示位置によるDOM
- 縦スクロールの表示位置によって目次のリンクにselectedクラスをDOMで追加する方法について解説します。
- HTMLコンテンツが縦長の場合、下にスクロールした際に現在表示している位置を視覚的にわかりやすくするための方法を紹介します。
- 目次の<a>タグにselectedクラスを追加することで、現在表示している位置をユーザーに示すことができます。
- ベストアンサー
縦スクロールの表示位置によるDOM
縦長のHTMLコンテンツで下にスクロールした時にそのスクロール位置によって 目次のリンクにselectedクラスをDOMで追加し、現在どの部分を表示しているのかを視覚的にわかりやすくしたいのですが、 方法がわからず悩んでおります。そもそもHTMLの構造的に可能どうかもわからない素人ですが、どなたかご教授頂きたいと存じます。 現在のHTMLの構造は、 コンテンツのHTMLの前に目次の記述があり、その目次部分はposition:fixedで常に見える位置に表示してあります。 構造を簡単にしますと以下のようになっております。 <!-- 目次 START --> <div id="toc"> <ul class="toc"> <li class="toc_lebel_1"> <a href="#見出し1"> class="toc">見出し1</a> </li> <li class="toc_lebel_1"> <a href="#見出し2"> class="toc">見出し2</a> </li> <li class="toc_lebel_1"> <a href="#見出し3"> class="toc">見出し3</a> </li> </ul> </div> <!-- 目次 END --> <!-- コンテンツ START --> <h1> <a name="見出し1" id="見出し1">見出し1</a> </h1> ・・・ <h2> <a name="見出し2" id="見出し2">見出し2</a> </h2> ・・・ <h2> <a name="見出し3" id="見出し3">見出し3</a> </h2> ・・・ <!-- コンテンツ END --> このページはかなり縦長のページになっており、下にスクロールした際に現在表示している位置（例えば、見出し1と見出し2の間を表示している場合の位置）によって 目次の該当箇所の<a>タグにselectedのようなクラスを追加したいです。 よろしくお願いします。
- kamotimaoti
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは、 こんなかんじでしょうか？ ie では、うごきません。firefox でうごきました。 Array.reduce, document.querySelector(All), classList がつかえないとだめです。 いちのかんちは、たいまーをつかいました。 ぜんかくくうはくは、はんかくにしてください。 <!DOCTYPE html> <title></title> <meta charset="UTF-8"/> <style> body { padding-left:8em; } #toc { position:fixed; left : 0; } p { height : 20em; } a.selected { border-bottom: 2px red solid; color : red; } </style> <body> <div id="toc"> <ul class="toc"> <li class="toc_lebel_1"> <a href="#見出し1" class="toc selected">見出し1</a> <li class="toc_lebel_1"> <a href="#見出し2" class="toc">見出し2</a> <li class="toc_lebel_1"> <a href="#見出し3" class="toc">見出し3</a> </ul> </div> <h1 id="見出し1">見出し1</h1> <p>1<p>2<p>3<p>4<p>5 <h2 id="見出し2">見出し2</h2> <p>1<p>2<p>3<p>4<p>5 <h2 id="見出し3">見出し3</h2> <p>1<p>2<p>3<p>4<p>5 <script> //対象のアンカータグを集める var a = document.querySelectorAll ('div#toc > ul > li > a'); //対象のstyle.top の絶対値を求める var b = function (c) { for (var d = 0; c; c = c.offsetParent) d += c.offsetTop; return d; }; //aで集めた.helf をidとした要素を集め、b() を求め、配列にする var c = Array.prototype.reduce.call (a, function (d, e) { var f = e.getAttribute ('href'), g; if (/^#.+$/.test (f)) if (g = document.querySelector (f)) d.push ({ e: e, height: b (g) }); return d; }, []); var offset = 20; var d = function () { var f = 0, g = window.pageYOffset + offset, h; for (var i = c.length; h = c[--i]; ) h.e.classList[(f += h.height <= g) === 1 ? 'add': 'remove']('selected'); }; setInterval (d, 500); </script>
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
まいかい おもいつきで すみません。 setInterval のまえに、いかの いちぶんを じっこうしてみてはどうだろうか？ Array.prototype.slice.call (document.getElementsByClassName ('selected'), 0).forEach (function (e) { e.classList.remove ('selected'); });
お礼
babu_babooさん 自サイトでいろいろとテストしてみると、CMSに使用しているプラグインが影響しているようでした。 このプラグインをOFFにすると問題なく該当のページ全てが正常にDOMが動くようになりました。 なので当面はこのプラグインを使用せず運用していこうと考えております。 それとは別に自サイトの訪問者のブラウザを調べてみるとIE使用者が7割りを超えている状況でしたので 今回のDOMについては時間があるときにbabu_babooさんにご教授頂いた手法を参考にIE対応出来るようにシたいと考えております。 改めてありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
おはようございます。 すいしょうをながめてみます。 a,b は、c のためにあり、c は、そのごへんかしません。 >下にスクロールしていくと上の方から徐々にselectedが解除 と、あるので c はせいじょう。 なので、うがたがうは しょきのよみこみだんかいでおこなわれているとすいそく。 'selected' がついたままの、あんかーを node.cloneNode などをつかってこぴーしている。 h.e.classList[(f += h.height <= g) === 1 ? 'add': 'remove']('selected'); これは、かさんされていく f が、1 の場合のみ設定されるものであり、むしろ remove のほうがおおい。 css で、たかさのしていがないものをつかっている？ float だとか… けつろん！ よくわからない。ごめん。 -- あと、23歳OL女子ならゆるせるが Syntax error 'こんばんわ！' あっ！ふだん えらーを りょうさんするのは、俺かっ。
関連するQ&A
- 指定要素をスクロール時に非表示
JSで、divで囲ったある指定要素をスクロールしたら非表示にしたいのですが、 当方jsにまったく疎く、書き方がわかりません。 どなたかお助けいただけますと助かります。 サンプルなのですが、HTMLファイルのコードは以下になります。 <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div>
- 締切済み
- JavaScript
- javascript(DOM)でIDとテキストノードを取得する方法
下記のことをDOMを使ってやりたいと思っているのですが、ちょっとできないので教えていただきたいです。 ［HTML内での記述］ <h2 id="apple">りんご</h2> <p>...</p> <h2 id="grape">ぶどう</h2> <p>...</p> <h2 id="orange">みかん</h2> <p>...</p> <h2 id="peach">もも</h2> <p>...</p> 上記HTMLから<h2>内のid名とテキストを取得して、下記のようなリストにしたいです。 （<p>...</p>の部分はどうでもよいです。） <ul> <li><a href="#apple">りんご</a></li> <li><a href="#grape">ぶどう</a></li> <li><a href="#orange">みかん</a></li> <li><a href="#peach">もも</a></li> </ul> 要するに、見出しを取得してページ内リンクを作りたいのです。 DOMで、getElementByIdとか使って、、と何となくは分かるのですが、完成させるまでには至っていません。 ご教授いただければと思います。
- ベストアンサー
- JavaScript
- 階層番号について(CSS、html)
ブログの目次を作成しています。 1. 見出し1 2. 見出し2 2.1 見出し2-1 2.2 見出し2-2 3. 見出し3 このようにしたいのですが、上手くいきません。 修正箇所を教えて頂けると助かります。 【html】 <div class="toc-001"> <div> 目次 </div> <ol> <li><a href="#">見出し1</a></li> <li> <a href="#">見出し2</a> <ol> <li><a href="#">見出し2-1</a></li> <li><a href="#">見出し2-2</a></li> </ol> </li> <li><a href="#">見出し3</a></li> </ol> </div> 【css】 .toc-001 { margin-bottom: 30px; padding: 1em 1em 1em 2em; border: 1px solid #999; background-color: #f7f7f7; } .toc-001 div { display: flex; align-items: center; margin: 0; padding: 5px 0; } .toc-001 div::before { display: inline-block; width: 1em; height: 1em; margin-right: 5px; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E'); content: ''; } .toc-001 ol { list-style-type: decimal; margin: 0; padding: 0 1.2em; overflow: hidden; } .toc-001 ol ol { margin-top: 5px; } .toc-001 li { padding: 5px 0; } .toc-001 a { color: #166c9d; } どうぞ、よろしくお願い致します。
- ベストアンサー
- CSS
- パララックスページスクロールについて
こんにちは。 下記のコードはJQUERYコードをコピペしたもので、ド素人です。 ナビをクリックすると、各コンテンツBOXにいきますが、下のコードだとTOPの一番上まで来てしまいます、 クリック→ページトップから下へ85pxのところに来るように設定したいのですが。 ＝＝＝＝＝＝＝＝javascript＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script> //スムーススクロール 各コンテンツbox// $(function() { $(".scroll").click(function(event){ event.preventDefault(); var url = this.href; var parts = url.split("#"); var target = parts[1]; var target_offset = $("#"+target).offset(); var target_top = target_offset.top; $('html, body').animate({scrollTop:target_top}, 1200); }); }); </script> ==＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝HTML=====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <nav> <ul id="dropmenu"> <li><a href="#top" class="scroll">Top</a></li> <li><a href="#introduce" class="scroll">薬膳レシピとは</a></li> <li><a href="#basictypecheck" class="scroll">基本体質のチェック</a></li> <li><a href="#typedescription" class="scroll">気・血・水について</a></li> <li><a href="#mix" class="scroll">混合タイプの特徴</a></li> <li><a href="#notfeelingcheck" class="scroll">不調の原因チェック</a> <li><a href="#Profile" class="scroll">Profile</a></li> <li><a href="#Lesson" class="scroll">Lesson</a></li> </ul> </nav> ==＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝=====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 他にもコードが必要であれば、ご教示いただければ補足します。 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
- 見出しタグのつけ方について
見出しタグのつけ方について 見出しタグのつけ方が今一、理解できません。 下記のようなページの場合、適切な見出しタグのつけ方で適切なのはどれでしょうか？ それとも、この３つの中には適切なのはないでしょうか？ （特に、メニュー項目をどういう位置づけにしたらいいかがわかりません） 初歩的な質問ですが、よろしくお願い致します。 (1)h1・・・サイトの説明文 h2・・・サイト名 h3・・・Welcame,更新情報,関連リンク (2)h1・・・サイトの説明文 h2・・・Welcame,更新情報,関連リンク (3)h1・・・サイトの説明文 h2・・・HOME,ABOUT,WORKS,ACCESS,CONTACT h3・・・Welcame,更新情報,関連リンク --------------HTML------------------- <body> <div id="header"> <div id="logo_box">サイト名</div> <h1>サイトの説明文 </h1> <ul id="header_navi" class="clearfix"> <li> <a href="#">HOME</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">WORKS</a> </li> <li> <a href="#">ACCESS</a> </li> <li> <a href="#">CONTACT</a> </li> </ul> </div> <div id="inner" class="clearfix"> <div id="contents"> <h3>Welcame</h3> <p>TEXT TEXT</p> </div> <div id="right"> <h3>更新情報</h3> <p>TEXT TEXT</p> <h3>関連リンク</h3> <p>TEXT TEXT</p> </div> </div> </body> ----------------------------------------------------
- ベストアンサー
- HTML
- <ul>〜</ul> 内に普通のテキストを書くことはできません。と診断されます
Another HTML-lint gateway「http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html」にてHTML文法チェックを行ったところ以下のような診断をされました。 <ul>〜</ul> 内に普通のテキストを書くことはできません。（重要度9） なぜこういう診断がされてしまうのか原因がわかりません。 専門のサイトなどで<li>や<ul>について確認しましたが特に問題のある箇所が自分では特定出来ませんでした。 診断されたHTMLコード（抜粋）は以下になります。 <div id="sidebar"> <div id="sidebar_top"> <div id="sidebar_contents"> <p> </p> <p><img src="navigator.png" alt="" width="93" height="18" vspace="5" /></p> <h3>Categories : </h3> <div class="nav"> <ul> <li><a href="top">TOP</a></li> </ul> <h3>コンテンツ</h3> <ul> <li><a href="01">コンテンツ(1)</a></li> <li><a href="02">コンテンツ(2)</a></li> <li><a href="03">コンテンツ(3)</a></li> <li><a href="04">コンテンツ(4)</a></li> <li><a href="05">コンテンツ(5)</a></li> </ul> </div> </div></div></div> ※XHTML1.0 Transitional、UTF-8 これでは情報足りないようでしたら仰って下さい。 何卒、よろしくお願い致します。
- ベストアンサー
- HTML
- iframe内でのスクロールについて
iframeに関する質問です。 iframe内のみアンカーでスクロールしたいのですが、iframe含めページ全体がスクロールしてしまいます。 sampleファイルとして質問したい部分を抜粋したものを下記を記載します。 ◆index.html(親html) ◆01.html(iframe含む子html) ↓ ◆index.html <ul> <li><a href="01.html#Aarea" target="inline">子htmlのAへスクロール</a></li> <li><a href="01.html#Barea" target="inline">孫htmlのBへスクロール</a></li> <li><a href="01.html#Carea" target="inline">孫htmlのCへスクロール</a></li> </ul> <iframe src="01.html" id="inline" name="inline" width="300px" height="300px"></iframe> ◆01.html <div name="Aarea" id="Aarea" style="background:#00F; width:300px; height:300px; color:#CCC;"> <p>A area</p> </div> <div name="Barea" id="Barea" style="background:#9C0; width:300px; height:300px; color:#CCC;"> <p>B area</p> </div> <div name="Carea" id="Carea" style="background:#C36; width:300px; height:300px; color:#CCC;"> <p>C area</p> </div> これを実行した際に親であるindex.htmlもスクロールしてしまいます。 以前にも似た質問がされていましたが、対処方法が思っていたものと違っていた為質問自体重複してしまうかもしれませんが質問するに至りました。 完全にiframe内のみをスクロールさせる方法はありますでしょうか。 よろしくお願いします。
- 締切済み
- HTML
- mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい
javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）
- ベストアンサー
- JavaScript
- FC２で画像とHPが表示されない！
ホームページ作成初心者です。よろしくお願い致します。 ■手順■ (1)XHTML＋CSSデザインテンプレートからDL URL→http://pondt.com/con_tpl/standard/ (2)DLサンプルをFC2にて編集 ＜HTML文＞ index.htmlというサンプルファイルをそのまま使用 ＜画像＞ 表示されている画像をアップロード ※解凍後、端からテンプレートフォルダ内の画像をアップロードしました。 ■エラー■ 画像が表示されず文字のみのページになってしまいます。 ■HTML文■ ====ここから================================================== <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>ホームページのタイトルを入れてください</title> <meta name="keywords" content="ホームページのキーワードを入れてください" /> <meta name="description" content="ホームページの紹介文を入れてください" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="head"> <h1>キーワードをいれてください</h1> <h2><a href="./">STANDARD 03（タイトルを入れてください）</a></h2> <div id="head_menu"> <ul> <li><a href="./">HOME</a></li> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a>コンテンツ</a> <ol class="sub"> <li><a href="contents01.html">ここのメニューは</a></li> <li><a href="contents01.html">コンテンツ01</a></li> </ol> </li> <li><a href="contents01.html">コンテンツ</a></li> </ul> </div> </div> <div id="contents"> <div id="top"> <p class="line"><img src="img/line01.gif" alt="ライン" width="796" height="3" /></p> <div id="main_image"> <p> 文章が入ります。<br /> TEL 00-000-0000<br /> 削除も可能です。 背景の画像は差し替え可能です。<br /> </p> </div> <p><img src="img/line01.gif" alt="ライン" width="796" height="3" /></p> <div id="top_btm"> <div id="left"> <h3><img src="img/top/st_info.gif" alt="インフォメーション" width="440" height="26" /></h3> <div id="info"> <div id="main"> <h4>2009/01/18</h4> <p>検索エンジン対策としてキーワードを入力できるようにしました。</p> <h4>2008/06/01</h4> <p>本テンプレート配布開始</p> </div> </div><!-- info 終わり --> </div><!-- left 終わり --> <div id="right"> <div id="bnr_sps"> <p class="bnr01"><a href="contents01.html">おすすめ！！（画像差し替え可能）</a></p> <p class="bnr02"><a href="contents01.html">コンテンツ01はこちら（画像差し替え可能）</a></p> </div><!-- bnr_sps 終わり --> </div><!-- right 終わり --> </div><!-- top_btm end --> </div><!-- top 終わり --> <div id="foot_up"></div> </div><!-- contents 終わり --> <div id="copy">Copyright (C) <script language="javascript">document.write(new Date().getFullYear())</script> サイト名を入れてください. All Rights Reserved. </div> </div> <!--↓著作権表示※削除しないでください↓--> <div id="p-copy"> <p><a href="http://pondt.com/" target="_blank">ホームページテンプレートのpondt</a></p> </div> </body> </html> ====ここまで================================================== テンプレート(サンプル表示)通り表示するには、自分でカスタマイズする必要があるのでしょうか？？ローカルで開くぶんには表示されるのでHTML文的には合っていると思ったのですが・・・。 色々調べたのですが、解決しませんでした。 どなたか分かる方いらっしゃいましたらご助言していただけると助かります。よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- ホームページの位置が、、
教えていただきたいです。現在ホームページを作成中なのですが、、、 http://homepage.decoweb.jp/template/view/H200051 のテンプレートを使っていますが、、インターネットエクスプローラで表示すると、右に寄ってしまい、真ん中に位置がきません。 ちょうど真ん中にくるようにすればどのようにすればよいか教えてもらえないでしょうか？ 参考までにソースを記載しておきます。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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 name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.4.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <title>decoウェブ</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <!-- ▼ここからサイト名 --> <h1><FONT size="+3" style="font-size : 200%;"><a href="index.html"><U><I>fate type A</I></U><BR> </a></FONT></h1> <!-- ▲ここまでサイト名 --> </div> <div id="main" class="clearfix"> <div id="side"> <div id="photo"> <!-- ▼ここからメニュー上部画像 --> <img src="images/photo.jpg" /> <!-- ▲ここまでメニュー上部画像 --> </div> <div id="menu"> <ul> <!-- ▼ここからメニュー --> <li><a href="index.html">top</a></li> <li><a href="sub.html">profile</a></li> <li><a href="sub.html">gallaly</a></li> <li><a href="sub.html">links</a></li> <li><a href="sub.html">bbs</a></li> <!-- ▲ここまでメニュー --> </ul> </div> </div> <div id="contents"> <div id="news"> <div>NEWS</div> <!-- ▼ここからニュース -->2008 1 30</div> <BR> <h2>2008 1 30</h2> <!-- ▲ここまで見出し --> <!-- ▼ここから本文 --> <p>今日から総合エンターテイメントな（というかゲームとか、アニメとか）なページを目指して発信いたします。ページは簡素に、深く情報発信的なページを目指していきたいと思います！</p> <br /> <!-- ▲ここまで本文 --> </div> </div> <div id="footer" class="clearfix"> <div id="copyright">copyright© 2008 fate type A All Rights Reserved.</div> <div id="deco_banner"><a href="http://homepage.decoweb.jp/" target="_blank" title="無料テンプレートのdecoweb - ホームページデザインのテンプレート"><img src="images/decoweb.gif" alt="無料テンプレートのdecoweb - ホームページデザインのテンプレート" title="無料テンプレートのdecoweb - ホームページデザインのテンプレート" /></a></div> </div><!-- [FC2 Analyzer] http://analyzer.fc2.com/ --> <script language="javascript" src="http://analyzer52.fc2.com/ana/processor.php?uid=434228" type="text/javascript"></script> <noscript><div align="right"><img src="http://analyzer52.fc2.com/ana/icon.php?uid=434228&ref=&href=&wid=0&hei=0&&col=0" /><a href="http://bbs.fc2.com/">掲示板</a></div></noscript> <!-- [FC2 Analyzer] --> </div> </body> </html>
- ベストアンサー
- レンタルサーバ・ASP
お礼
babu_babooさん はじめましてこんばんわ！ 早速ご回答くださいましてありがとうございます。 スクリプトを手前のHTMLで試してみましたが問題なく動作しております。 babu_babooさんの仰る通りIE9では動きませんでしたがchromeとOperaでは動きました。 質問の時にメジャーなライブラリ(Jqueryなど)を利用する場合でもOKですと記載するのを忘れていたのですが そんなことも必要なくとても感動です。 querySelectorAllのところを少し変えるだけで他のサイトにも流用出来そうで非常に満足です。 他の方のご教授がなければこの質問は本日中に締め切りとさせていただきます。
補足
babu_babooさん 困ったことにDOMが正常に動作するページと同じような構造のHTMLでありながら 結果が異なるページがあるのです。 そのページを読み込むとdiv#toc内のすべてのaがselectedになった状態で表示されてしまいます。 下にスクロールしていくと上の方から徐々にselectedが解除されていきます。 キャッシュをクリアし、何度読込しても特定の数ページだけ必ずそのような状態になります。 何か良い対処法はないでしょうか？？