文章详情页目录，JS实现文章详情页自动生成目录导航树

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

jQuery

打开边栏(ESC) 关闭边栏(ESC)

文章详情页目录，JS实现文章详情页自动生成目录导航树

很多网站都有根据文章内容，自动提取对应的标题然后组织成文章目录树导航，例如常见的CSDN就实现了目录导航树，如下图

from clipboard

实现思路，遍历详情找出 H1 ~ H6标题标签，然后有序的构造成一棵树并显示到页面中。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
</head>
<body>
  <div id="menu-tree"></div>
  <div id="article-content">
    <h1>git代码地址</h1>
    <p>我自己关于本项目的git仓库地址</p>
    <h1>前端Vue核心</h1>
    <p>开发一个前端模块可以概括为以下几个步骤：<br> （1）写静态页面、拆分为静态组件；<br> （2）发请求（API）；<br> （3）vuex（actions、mutations、state三连操作）；<br> （4）组件获取仓库数据，动态展示；</p>
    <h1>1、vue文件目录分析</h1>
    <p><strong>public文件夹</strong>：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。</p>
  </div>
  <script>
    //构造树
    function buildTreeData(tree,node){
        if(tree.childrens.length == 0){
            tree.childrens.push(node);
        }else{
            var lastNode =   tree.childrens[tree.childrens.length - 1];
            if(node.tagName  > lastNode.tagName ){
                buildTreeData(lastNode,node);
            }else{
                tree.childrens.push(node);
            }
        }
    }
    
    //初始化生成树
    function initTree(note){
        var result = $("<li>" + note.text + "</li>");
        var size = note.childrens.length;
        if(size > 0){
            var toggle = $("<i title='展开'>[+]</i>");
            toggle.on('click', function (e) {
    //          debugger;
                var children = $(this).next('ul');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', '展开').text("[+]");
                } else {
                    children.show('fast');
                    $(this).attr('title', '关闭').text("[-]");
                }
                e.stopPropagation();
            });
            result.append(toggle);
    
            var ul = $("<ul style='display: none;'></ul>"); // 需要默认展示，可以删除style='display: none;'
            for(var i=0;i<size;i++){
                ul.append(initTree(note.childrens[i]));
            }
            result.append(ul);
        }
        
        return result;
    }
    
    
    //生成目录菜单树
    $(function(){
        var tree= {tagName:"H0",text:"<span>目录<span>",childrens:[]};
        var tags = ['H1','H2', 'H3', 'H4', 'H5', 'H6'];
        $.each($('#article-content').children(), function(i, val) {
            if(tags.indexOf(val.tagName) > -1) {
                var name = "p" + i;
                $(val).before("<a name='"+name+"'></a>");
                var node = {
                        tagName:val.tagName,
                        text:"<a href='#" + name + "'>" + val.textContent + "</a>",
                        childrens:[]
                    };
                buildTreeData(tree,node);
            }
        });
    
        if(tree.childrens.length > 0){
            var menuTres = $("#menu-tree");
            menuTres.prepend(initTree(tree));
            menuTres.show();
        }
    });
  </script>
</body>
</html>

赏

前一篇

jquery实现图片循环旋转指定角度

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

jquery实现图片循环旋转指定角度

jquery.validator.min.js复选框验证