jquery根據(jù)文章H標簽自動生成導航目錄2017-11-19 20:57

在一些旅游網(wǎng)站，比如說途牛、攜程這些，當你看某條線路的詳情頁時，右邊會有相應的第一天、第二天等的目錄。

這么大的網(wǎng)站，不可能后臺添加行程的時候，每一天都要自動寫一個目錄吧！

所以應該是自動生成的。

那么它是如何生成的呢？又是根據(jù)什么規(guī)則來生成的呢？

今天我們就來講講使用jquery，根據(jù)文章里面的H標簽自動生成導航目錄。

下面是完整實例代碼，直接可用。 html代碼

jquery根據(jù)文章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();//獲取內(nèi)容

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

$(this).attr("id",markid);//為當前h標簽設置id

$(".menu").append(""+contentH+"");//在目標DIV中添加內(nèi)容

}

});

});

一路黔行，醉美貴州——黔西南、黔南游記

摘要

第一天抵達貴陽后，先游青巖古鎮(zhèn)，后品酸湯魚 宿：貴陽；第二天白天游覽安順黃果樹后，晚上至黔西南州興義入住；第三天游覽完萬峰林和馬嶺河大峽谷，返回安順；第四天火車前往荔波游覽，晚上住小七孔；第五天上午繼續(xù)游玩小七孔，下午回到貴陽，晚上航班離開貴州。五天的貴州之行，完全采取坐火車坐班車的旅行方式，安排緊湊，由于第一次來到貴州，黃果樹景區(qū)之大超出預期，加上火車晚點以及班車停開，雖最終均按計劃走完行程，其中的曲曲折折，還是留下深刻的教訓

第1天

第1天內(nèi)容

第2天

第2天內(nèi)容

第3天

第3天內(nèi)容

第4天

第4天內(nèi)容

第5天

第5天內(nèi)容

親自測試一下

總結(jié)

以上是生活随笔為你收集整理的html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。