Markdown Toc目录实现

    2015-04-07 00:00     0 条评论

Markdown Toc目录实现

  <!-- 目录start -->
  <style type="text/css">
    /*导航*/
    .BlogAnchor {
        background: #f4f7f9;
        padding: 10px;
        line-height: 180%;
    }
    .BlogAnchor p {
        font-size: 18px;
        color: #15a230;
        margin-bottom: 0.3em;
    }
    .BlogAnchor .AnchorContent {
        padding: 5px 0px;
    }
    .BlogAnchor li{
        text-indent: 20px;
        font-size: 14px;
    }
    #AnchorContentToggle {
        font-size: 13px;
        font-weight: normal;
        color: #FFF;
        display: inline-block;
        line-height: 20px;
        background: #5cc26f;
        font-style: normal;
        padding: 1px 8px;
        margin-right: 10px;
    }
    .BlogAnchor a:hover {
        color: #5cc26f;
    }
    .BlogAnchor a {
        text-decoration: none;
    }
  </style>

  <div class="BlogAnchor">
      <p>
          <b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录[-]</b>
      </p>
      <div class="AnchorContent" id="AnchorContent"> </div>
  </div>

  <script type="text/javascript">
    //在文章中查找title并填充到div AnchorContent中
    $(".wrapper").find("h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        var idValue = $(item).attr("id");
        idValue = '#'+idValue
        $("#AnchorContent").append('<li><a class="new'+tag+' anchor-link" href="' + idValue + '" link="#wow'+i+'">'+(i+1)+" · "+$(this).text()+'</a></li>');
        $(".newh2").css("margin-left",0);
        $(".newh3").css("margin-left",20);
        $(".newh4").css("margin-left",40);
        $(".newh5").css("margin-left",60);
        $(".newh6").css("margin-left",80);
    });
    $("#AnchorContentToggle").click(function(){
        var text = $(this).html();
        if(text=="目录[-]"){
            $(this).html("目录[+]");
            $(this).attr({"title":"展开"});
        }else{
            $(this).html("目录[-]");
            $(this).attr({"title":"收起"});
        }
        $("#AnchorContent").toggle();
    });

    $(".anchor-link").click(function(){
      debugger
      $("html,body").animate({scrollTop: $($(this).attr("href")).offset().top}, 1000);
    });
  </script>
  <!-- 目录end -->
本文地址:https://www.yhawaii.net/61.html
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

 发表评论


表情