基于JS實(shí)現(xiàn)9種不同的面包屑和分布式多步驟導(dǎo)航效果
更新時(shí)間：2017年02月21日 08:47:33 作者：285267128
本文是小編給大家分享的基于js實(shí)現(xiàn)的9種不同風(fēng)格的面包屑和分布式多步驟導(dǎo)航效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
【常用面包屑】9種不同的面包屑和分布式多步驟導(dǎo)航
實(shí)例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>9種不同的面包屑和分布式多步驟導(dǎo)航</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="/api/jq/1/css/style.css" rel="external nofollow" />
<script src="/api/jq/1/js/modernizr.js"></script>
</head>
<body>
<div class="container">
<div class="demo">
<p>1、基本面包屑</p>
<nav>
<ol class="cd-breadcrumb">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >PHP</a></li>
<li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >模板</a></li>
</ol>
</nav>
<p>2、自定義分隔符面包屑</p>
<nav>
<ol class="cd-breadcrumb custom-separator">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >PHP</a></li>
<li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >模板</a></li>
</ol>
</nav>
<p>3、自定義圖標(biāo)面包屑</p>
<nav>
<ol class="cd-breadcrumb custom-separator custom-icons">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >PHP</a></li>
<li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >模板</a></li>
</ol>
</nav>
<p>4、三角箭頭面包屑</p>
<nav>
<ol class="cd-breadcrumb triangle">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >PHP</a></li>
<li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >模板</a></li>
</ol>
</nav>
<p>5、三角箭頭帶圖標(biāo)面包屑</p>
<nav>
<ol class="cd-breadcrumb triangle custom-icons">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >PHP</a></li>
<li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >模板</a></li>
</ol>
</nav>
<p>6、基本分步指示</p>
<nav>
<ol class="cd-multi-steps text-center">
<li class="visited"><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >購物車</a></li>
<li class="visited" ><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >結(jié)算付款</a></li>
<li class="current"><em>送貨</em></li>
<li><em>驗(yàn)貨收貨</em></li>
</ol>
</nav>
<p>7、自定義圖標(biāo)分步指示</p>
<nav>
<ol class="cd-multi-steps text-center custom-icons">
<li class="visited"><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >購物車</a></li>
<li class="visited" ><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >結(jié)算付款</a></li>
<li class="current"><em>送貨</em></li>
<li><em>驗(yàn)貨收貨</em></li>
</ol>
</nav>
<p>8、圓點(diǎn)分步指示</p>
<nav>
<ol class="cd-multi-steps text-top">
<li class="visited"><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >購物車</a></li>
<li class="visited" ><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >結(jié)算付款</a></li>
<li class="current"><em>送貨</em></li>
<li><em>驗(yàn)貨收貨</em></li>
</ol>
</nav>
<p>9、帶數(shù)字的圓點(diǎn)分步指示</p>
<nav>
<ol class="cd-multi-steps text-bottom count">
<li class="visited"><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >購物車</a></li>
<li class="visited" ><a href="#0" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >結(jié)算付款</a></li>
<li class="current"><em>送貨</em></li>
<li><em>驗(yàn)貨收貨</em></li>
</ol>
</nav>
</div>
</div>
</body>
</html>
以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)9種不同的面包屑和分布式多步驟導(dǎo)航效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)單擊Tab表單切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)單擊Tab表單切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了JS的數(shù)組迭代方法,實(shí)例分析了javascript使用數(shù)組迭代的相關(guān)技巧,代碼中備有較為詳細(xì)的注釋便于理解,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數(shù)傳遞給另一個(gè)類型、函數(shù)、或者其他結(jié)構(gòu)。TypeScript 支持泛型作為將類型安全引入組件的一種方式。這些組件接受參數(shù)和返回值，其類型將是不確定的，直到它在代碼中被使用2022-10-10
發(fā)布一個(gè)高效的JavaScript分析、壓縮工具 JavaScript Analyser
發(fā)布一個(gè)高效的JavaScript分析、壓縮工具 JavaScript Analyser...2007-11-11
用js動(dòng)態(tài)添加html元素,以及屬性的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄胘s動(dòng)態(tài)添加html元素,以及屬性的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作示例
這篇文章主要介紹了JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對(duì)象方法的數(shù)組遍歷、比較、去重、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
本文為大家介紹下一個(gè)封裝展開收起效果js代碼;引用jQuery的框架，兼容ie6以上，火狐，谷歌，ie6沒有測(cè)試大家可以自己測(cè)試2013-07-07
js正則表達(dá)式驗(yàn)證密碼強(qiáng)度【推薦】
本文主要介紹了js利用正則表達(dá)式驗(yàn)證密碼強(qiáng)度的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
JavaScript實(shí)現(xiàn)計(jì)算多維嵌套數(shù)組深度
在前端開發(fā)中，經(jīng)常會(huì)遇到需要處理多維嵌套的數(shù)據(jù)結(jié)構(gòu)，并需要計(jì)算出它們的深度，本文就來講講如何使用JavaScript實(shí)現(xiàn)計(jì)算多維嵌套數(shù)組深度吧2023-06-06
微信小程序使用scroll-view標(biāo)簽實(shí)現(xiàn)自動(dòng)滑動(dòng)到底部功能的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了微信小程序使用scroll-view標(biāo)簽實(shí)現(xiàn)自動(dòng)滑動(dòng)到底部功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11