美文网首页
使用jQuery给网页自动生成二级导航目录

使用jQuery给网页自动生成二级导航目录

作者: 峡州仙士 | 来源:发表于2019-06-17 14:09 被阅读0次

    使用jQuery给网页自动生成二级导航目录

    自己有一个分章节的网页,类似百度百科的词条页面,就做了个二级导航目录。你只需把导航目录代码content放在需要的位置即可。

    var jquery_h3_list = $('h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
        if(jquery_h3_list.length>0)
        {
            var content = '';
            //content    += '<ul style="list-style-type:none;text-align: left;margin:2px 2px;">';
            for(var i =0;i<jquery_h3_list.length;i++)
            {
                //var go_to_top = '<div style="text-align: right"><a name="_lab' + i + '"></a></div>';
                var go_to_top = '<a name="_lab' + i + '"></a>';
                $(jquery_h3_list[i]).before(go_to_top);
                var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h3");
                if(jquery_h4_list.length>0)
                {
                    var li_content = '<li class="dropdown"><a href="#_lab' + i + '" class="dropdown-toggle" data-toggle="dropdown">' + $(jquery_h3_list[i]).text() + '</a>';
                    //var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h3");
                    li_content +='<ul class="dropdown-menu">';
                }
                else{
                    var li_content = '<li class="dropdown"><a href="#_lab' + i + '" >' + $(jquery_h3_list[i]).text() + '</a>';
                //var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h3");
                }
                for(var j = 0;j < jquery_h4_list.length;j++)
                {
                    //var go_to_top2 = '<div style="text-align: right"><a name="_lab2'+ i + j + '"></a></div>';
                    var go_to_top2 = '<a name="_lab2'+ i + j + '"></a>';
                    $(jquery_h4_list[j]).before(go_to_top2);
                    li_content +='<li><a href="#_lab2'+ i + j + '">' + $(jquery_h4_list[j]).text() + '</a></li>';
                }
                if(jquery_h4_list.length>0)
                {
                    li_content +='</ul>';
                }
                li_content +='</li>';
                content += li_content;
            }
    

    需要说明的是,代码参考了互联网上另一位作者的。Ta写的是为某博客写的类似插件的
    代码,我在此基础上进行了修改,并对添加了对Bootstrap的适应。由于Ta的博客已声明停更,不能保证链接稳定性,就不附链接了,有需要的自行百度查找。也欢迎大家将此代码修改优化后发布。

    代码及本文采用GNU General Public License v3.0协议进行开源。

    原文来自作者博客

    相关文章

      网友评论

          本文标题:使用jQuery给网页自动生成二级导航目录

          本文链接:https://www.haomeiwen.com/subject/dssafctx.html