jquery添加文章目录
前端技术 . 2019/11/11发布 . shanyonggang_web . 我要评论 . 283阅读

本文后台文章编辑模块采用富文本编辑器,想在前台实现用户点击文章目录跳转,博主采用的技术是jquery技术

引入jquery

首先需要在模版中引入jquery文件

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

编写模版代码

        博主默认所有文章均设置了目录检索,因此创建了一个存储目录检索的div标签,同时创建了一个存储ol标签用于在其内部放置li标签

<!-- 新增的目录 -->
<div class="col-sm-1 col-md-1 hidden-xs hidden-sm" style="margin-right: 3%;">
  <div style="border: 1px solid #e7e7e7;padding: 5px;border-radius: 10px;position: fixed">
    <h4><strong>目录</strong></h4>
       <hr>
       <ol class="blog_column">
       </ol>
  </div>
</div>

        编写js代码,具体如下:

<!--# jquery自动生成目录-->
<script>
    $(document).ready(function(){
        // 根据自己的文章内容位置设计css选择器(取出一级目录,博主的均为h3标签内)
        columns = $("#article_body h3");
        for(var i=0;i<columns.length;i++) {
            // 为标签设置索引id
            $(columns[i]).attr("id","index_"+i);
            // 在ol标签内添加li标签,并在其内构建a标签,用户跳转至与上述对应的目录索引处
            $(".blog_column").append("<li><a href="+"#"+"index_"+i+ ">" + $(columns[i]).text() + "</a></li>");
        }
    });
</script>

        至此,已经实现目录索引,不需在后台设置,只要在前台编写代码即可,目录的具体样式可根据自己需求设计,博主的设计思路是:在电脑端将索引目录放置在左侧固定位置,方便用户点击查看,在移动端将索引目录放置在文章开始的最初起始位置,具体如下:


  • 有疑问请在下方评论区留言,我会尽快回复。
  • Email私信我: 511248513@qq.com 或添加博主 微信
本文作者:shanyonggang_web
发布时间:2019年11月11日 10:03
许可协议: 署名-非商业性使用 4.0 国际许可协议
知识共享许可协议     转载请保留原文链接及作者
正在加载今日诗词....
您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的


登录 后回复

当前暂无评论,点击登录来做第一个吃螃蟹的人吧!