jquery根据文章H标签自动生成导航目录2017-11-19 20:57

在一些旅游网站，比如说途牛、携程这些，当你看某条线路的详情页时，右边会有相应的第一天、第二天等的目录。

这么大的网站，不可能后台添加行程的时候，每一天都要自动写一个目录吧！

所以应该是自动生成的。

那么它是如何生成的呢？又是根据什么规则来生成的呢？

今天我们就来讲讲使用jquery，根据文章里面的H标签自动生成导航目录。

下面是完整实例代码，直接可用。 html代码

jquery根据文章h标签自动生成导航目录

#content{padding-right:102px;}

.menu{width:90px; background:#fff; border:1px #32c6c6 solid; border-radius:4px; position:fixed; right:0; padding:0 6px;}

.menu a{width:100%; height:30px; line-height:30px; display:inline-block;}

$(document).ready(function(e) {

$("#content").children().each(function(index, element) {

var tagName=$(this).get(0).tagName;

if(tagName.substr(0,1).toUpperCase()=="H"){

var contentH=$(this).html();//获取内容

var markid="mark-"+tagName+"-"+index.toString();

$(this).attr("id",markid);//为当前h标签设置id

$(".menu").append(""+contentH+"");//在目标DIV中添加内容

}

});

});

亲自测试一下