html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录

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中添加内容

}

});

一路黔行，醉美贵州——黔西南、黔南游记

摘要

第一天抵达贵阳后，先游青岩古镇，后品酸汤鱼宿：贵阳；第二天白天游览安顺黄果树后，晚上至黔西南州兴义入住；第三天游览完万峰林和马岭河大峡谷，返回安顺；第四天火车前往荔波游览，晚上住小七孔；第五天上午继续游玩小七孔，下午回到贵阳，晚上航班离开贵州。五天的贵州之行，完全采取坐火车坐班车的旅行方式，安排紧凑，由于第一次来到贵州，黄果树景区之大超出预期，加上火车晚点以及班车停开，虽最终均按计划走完行程，其中的曲曲折折，还是留下深刻的教训

第1天

第1天内容

第2天

第2天内容

第3天

第3天内容

第4天

第4天内容

第5天

第5天内容

亲自测试一下

html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录相关推荐

根据文章H标签自动生成导航目录
原文地址http://www.santii.com/article/154.html 在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网 ...
长篇文章根据文章H标签自动生成导航目录方法
在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网站,不可能后台添加行程的时候,每一天都要自动写一个目录吧! 所以应该是自动生成的. 那 ...
根据文章中H标签自动生成文章目录
以前看到csdn上的目录结构就想把它移植到博客里,今天抽了个空从csdn上拔下了代码. js代码,复制放入到single.php页面中 <script type="text/javas ...
博客园文章自动生成导航目录
文章如果比较长的话,子标题很难找,文章结构没法一目了然,如果有一个导航目录靠在边栏就好了看了很多园子里其他的文章,js和css挺长的,怕用不好,干脆自己尝试写一个一.要实现的功能 1.自动生成不 ...
Jquery实现自动生成二级目录
在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...
JavaScript自动生成博文目录导航/TOP按钮
博客园页面添加返回顶部TOP按钮进入网页管理->设置在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式此处可以将背景色background-co ...
python读取word文档结构图_python根据文章标题内容自动生成摘分享的实例
如何用Python玩转TF-IDF之寻找相似文章并生成摘要应用1:关键词自动生成核心思想是对于某个文档中的某个词,计算其在这个文档中的标准化TF值,然后计算这个词在整个语料库中的标准化IDF值.在 ...
JavaScript自动生成博文目录导航
http://www.cnblogs.com/xdp-gacl/p/3718879.html 为博客园添加目录的配置总结 http://www.cnblogs.com/jiangz/p/3734968 ...
JavaScript：自动生成博文目录导航
感谢孤傲苍狼分享了自动生成博文目录的方法,本文仅作存档使用. 图 1:效果预览 CSS 样式 #TOCbar{font-size:12px; text-align:left; position: ...

html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录

摘要

第1天

第2天

第3天

第4天

第5天

html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录相关推荐

最新文章

热门文章