jsは文章の目次と索引のナビゲーションを実現します。

7349 ワード

記事の目次索引ナビゲータ

TOCとは何ですか？テーブルof content。
具体的にどんな効果がありますか？気軽にhexoブログで体験してみてください。例えばこれです。
はい、実現には2つのポイントがあります。
ポイントディレクトリが段落にジャンプします。「a」タグのアンカーにより、ここですの原理が実現されます。
スクロールトリガーディレクトリ変換：現在位置している段落をJsでモニターして判定し、対応するディレクトリ項目を明るくします。
簡単なデモを書いてこの効果を実証しました。
ソースの住所：https://github.com/owenliang/js-toc
オンライン体験：http://owenliang.github.io/js-toc
分析を実現する
萼tocは左側の目次で、33853;contentは右側の文章の本文です。


 <div id="toc">
  <ul>

  </ul>
 </div>
 <div id="content">
  <a name="seg-1" class="seg-begin"><h1> 1  </h1></a>
  <div class="seg-content"></div>
  <a name="seg-2" class="seg-begin"><h1> 2  </h1></a>
  <div class="seg-content"></div>
  <a name="seg-3" class="seg-begin"><h1> 3  </h1></a>
  <div class="seg-content"></div>
  <a name="seg-4" class="seg-begin"><h1> 4  </h1></a>
  <div class="seg-content"></div>
 </div>

cssを利用してコントロールします。現在のディレクトリは明るくて赤いです。本文は右側でスクリーンを埋めます。


  #toc {
   width: 200px;
   position: fixed;
   left: 0;
   top: 0;
  }
  #toc a.active {
   color: red;
  }
  #content {
   margin-left: 200px;
  }

上記の静止画ページでは、ディレクトリは一時的に空です。JSで動的に生成する必要があります。
本文は人工的に段落の開始標識を埋めなければなりません。つまり、a.seg-beginのようなアンカーポイントです。各段落のアンカーポイントnameは唯一で、アンカーポイントの後に段落の内容が続きます。
JSの中で、まずアンカーポイントの出現順にすべてのa.seg-beginを集めてsegs配列に保存します。その順序は文章の上から下へ読む順番です。その「h 1」の段落タイトルに従って、滮tocの「ul」リストを作ります。


    var segs = [];
    $(".seg-begin").each(function (idx, node) {
     segs.push(node)
     var link = $("<a></a>").attr("href", "#" + $(node).attr("name")).html($(node).children("h1").html())
     if (!idx) {
      link.addClass("active")
     }
     var row = $("<li></li>").append(link)
     $("#toc ul").append(row)
    })

その後、ブラウザのscrollイベントをバインドしてモニターし、スクロールするたびに、一番近い画面上部にあるa.seg-beginノードを判断します。これは現在読んでいる段落です。


$(window).bind("scroll", function() {
     var scrollTop = $(this).scrollTop()
     var topSeg = null
     for (var idx in segs) {
      var seg = segs[idx]
      if (seg.offsetTop > scrollTop) {
       continue
      }
      if (!topSeg) {
       topSeg = seg
      } else if (seg.offsetTop >= topSeg.offsetTop) {
       topSeg = seg
      }
     }
     if (topSeg) {
      $("#toc a").removeClass("active")
      var link = "#" + $(topSeg).attr("name")
      console.log('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]')
      $('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]').addClass("active")
      // console.log($(topSeg).children("h1").text())
     }
    })

後続
ここでのディレクトリの生成は、フロントエンドJSで本文のアンカーポイントに基づいて動的に生成され、SEOのために記事本文を後端に提出する際にこれらのアンカーポイントにマッチし、直接にディレクトリとして保存することができます。
完全コード


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
  * {
   margin: 0;
   padding: 0;
   word-break: break-all;
  }
  #toc {
   width: 200px;
   position: fixed;
   left: 0;
   top: 0;
  }
  #toc a.active {
   color: red;
  }
  #content {
   margin-left: 200px;
  }
 </style>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script>
  $(document).ready(function () {
   for (var i = 0; i < 50; ++i) {
    $(".seg-content").append("<p>      </p>")
   }

   (function () {
    var segs = [];
    $(".seg-begin").each(function (idx, node) {
     segs.push(node)

     var link = $("<a></a>").attr("href", "#" + $(node).attr("name")).html($(node).children("h1").html())
     if (!idx) {
      link.addClass("active")
     }
     var row = $("<li></li>").append(link)
     $("#toc ul").append(row)
    })

    $(window).bind("scroll", function() {
     var scrollTop = $(this).scrollTop()

     var topSeg = null
     for (var idx in segs) {
      var seg = segs[idx]
      if (seg.offsetTop > scrollTop) {
       continue
      }
      if (!topSeg) {
       topSeg = seg
      } else if (seg.offsetTop >= topSeg.offsetTop) {
       topSeg = seg
      }
     }
     if (topSeg) {
      $("#toc a").removeClass("active")

      var link = "#" + $(topSeg).attr("name")
      console.log('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]')
      $('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ]').addClass("active")
      // console.log($(topSeg).children("h1").text())
     }
    })
   })()
  })
 </script>
</head>
<body>
 <div id="toc">
  <ul>

  </ul>
 </div>
 <div id="content">
  <a name="seg-1" class="seg-begin"><h1> 1  </h1></a>
  <div class="seg-content"></div>
  <a name="seg-2" class="seg-begin"><h1> 2  </h1></a>
  <div class="seg-content"></div>
  <a name="seg-3" class="seg-begin"><h1> 3  </h1></a>
  <div class="seg-content"></div>
  <a name="seg-4" class="seg-begin"><h1> 4  </h1></a>
  <div class="seg-content"></div>
 </div>
</body>
</html>

また、ここではネストされたディレクトリ構造を実現していません。特にhexoのやり方を観察してみました。h 1、h 2、h 3を通じて階層を表現しています。このように、each遍歴でディレクトリを生成する時に、この情報に基づいてネストレベルのマークを完成させることができます。問題は解決されます。

Javaは文字列を暗号化します。

java webページの添付ファイル、写真のダウンロードとオープン（実現方法）