长篇文章根据文章H标签自动生成导航目录方法
在一些旅游网站,比如说途牛、携程这些,当你看某条线路的详情页时,右边会有相应的第一天、第二天等的目录。
这么大的网站,不可能后台添加行程的时候,每一天都要自动写一个目录吧!
所以应该是自动生成的。
那么它是如何生成的呢?又是根据什么规则来生成的呢?
今天我们就来讲讲使用jquery,根据文章里面的H标签自动生成导航目录。
下面是完整实例代码,直接可用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>jquery根据文章h标签自动生成导航目录</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
#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;}
</style>
<script>
$(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("<a href='#"+markid+"'>"+contentH+"</a>");//在目标DIV中添加内容 } });
});
</script>
</head><body>
<p>注意:此实例是在框架中显示,可能导航目录链接点击将会出错,代码单独使用没问题。</p>
<div class="menu"></div>
<div id="content">
一路黔行,醉美贵州——黔西南、黔南游记
<h2>摘要</h2>
<div style="height:800px;">
第一天抵达贵阳后,先游青岩古镇,后品酸汤鱼 宿:贵阳;第二天白天游览安顺黄果树后,晚上至黔西南州兴义入住;第三天游览完万峰林和马岭河大峡谷,返回安顺;第四天火车前往荔波游览,晚上住小七孔;第五天上午继续游玩小七孔,下午回到贵阳,晚上航班离开贵州。五天的贵州之行,完全采取坐火车坐班车的旅行方式,安排紧凑,由于第一次来到贵州,黄果树景区之大超出预期,加上火车晚点以及班车停开,虽最终均按计划走完行程,其中的曲曲折折,还是留下深刻的教训
</div>
<h3>第1天</h3>
<div style="height:800px;">第1天内容</div>
<h3>第2天</h3>
<div style="height:800px;">第2天内容</div>
<h3>第3天</h3>
<div style="height:800px;">第3天内容</div>
<h3>第4天</h3>
<div style="height:800px;">第4天内容</div>
<h3>第5天</h3>
<div style="height:800px;">第5天内容</div>
</div>
</body>
</html>
长篇文章根据文章H标签自动生成导航目录方法相关推荐
- html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录
jquery根据文章H标签自动生成导航目录2017-11-19 20:57 在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网站,不可能 ...
- 根据文章H标签自动生成导航目录
原文地址http://www.santii.com/article/154.html 在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网 ...
- 根据H标签自动生成多级目录
根据H标签自动生成多级目录 这个问题分为两步 将标签的层级关系生成树结构 递归遍历树结构,使用ol li嵌套生成多级目录 <h2>一级标题1</h2> 1. 一级标题1 < ...
- 博客园文章自动生成导航目录
文章如果比较长的话,子标题很难找,文章结构没法一目了然,如果有一个导航目录靠在边栏就好了 看了很多园子里其他的文章,js和css挺长的,怕用不好,干脆自己尝试写一个 一.要实现的功能 1.自动生成 不 ...
- 根据文章中H标签自动生成文章目录
以前看到csdn上的目录结构就想把它移植到博客里,今天抽了个空从csdn上拔下了代码. js代码,复制放入到single.php页面中 <script type="text/javas ...
- markdown自动生成导航目录
把这一段代码插入到markdown生成的HTML文件的head标签中,将会自动根据markdown的标题按级别生成导航目录 <script src="http://code.jquer ...
- 利用strut2标签自动生成form前端验证代码
利用strut2标签自动生成form前端验证代码,使用到的技术有 1.struts2标签,如<s:form> <s:textfieled> 2.struts2读取*Valida ...
- Jquery实现自动生成二级目录
在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...
- TP自动生成模块目录
TP自动生成模块目录 例如我想在项目中增加一个AdminI模块 只需要在入口文件index.php中添加: define('BIND_MODULE','Admin'); 再访问127.0.0.1项目就 ...
最新文章
- 2021-2027年中国透光立体玻璃行业市场深度分析及前瞻研究报告
- CCF201512-3 画图(100分)
- Android InputType
- mysql binlog 恢复
- java poi导出excel模板_Java poi实现导出excel,添加数据有效性,生成模板
- java代码获取系统时间相差8小时
- windows2012 下载启动ssh
- hdu 5294 Tricks Device 最短路建图+最小割
- 服务器维护封号,LOL客服的关于他们自己服务器问题导致账号被封号的问题
- 【原创】基于SSM的医院预约挂号系统(医院预约挂号系统毕设源代码)
- C++春招实习和秋招面试过程记录
- 店盈通:拼多多直通车推广怎么操作?技巧有哪些?
- 剑指offe-机器人的运动范围
- GBA火焰纹章改版-智慧的结晶
- cajviewer打不开,卸载重装也于事无补。一分钟解决,亲测有效。
- c/c++算法之“24点”经典问题
- NEW RDSP MODE I (快速幂)
- 从零学习数据结构与算法---基础与课前准备笔记
- 多柱汉诺塔问题Hanoi 动态规划求解方案数
- 我说百度很垃圾的10条理由
热门文章
- LoadRunner注册问题
- 阅读视图用于自己在个人计算机,2018年秋西南大学在线作业解析[1055]《powerpoint多媒体课件制作》.doc...
- SATA VS PATA
- 前端开源库免费 CDN 加速
- SEO回归正常,如何避免纸上谈兵?
- 解决程序提示“应用程序发生异常 未知的软件异常(0x0eedfade),位置为 0x7c812fd3”
- jquery库(jquery库)
- 喵式代码 最强 强悍 绝对雷人
- sql 判断某列是小数
- Go关键字--func