javascript创建面包屑路径

最新推荐文章于 2024-04-05 13:13:43 发布

转载最新推荐文章于 2024-04-05 13:13:43 发布 · 564 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/dingjunnan/blog/191493

文章标签：

#javascript #xhtml #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>breadcrumb trail</title>
    <script>
    //<![CDATA[
    window.onload=function(){
        //分割相对路径
        var items=location.pathname.substr(1).split('/');
        
        //构建主路径
        var mainpath="<a href='"+location.protocol+"//"+location.hostname+"/";
        
        var breadcrumbTrail="<p>";
        for(var i=0;i<items.length;i++){
            //结尾的斜杠
            if(items[i].length==0) break;
            
            //将主路径增加到一个新的层次
            mainpath+=items[i];
            
            //在所有的项之后添加斜杠，最后一项除外
            if(i<items.length-1)
                mainpath+='/';
            
            //创建面包屑路径部分
            //仅对内部项添加箭头
            if(i>0&&i<items.length)
                breadcrumbTrail+=" -> ";
                
            //添加面包屑
            breadcrumbTrail+=mainpath+"'>"+items[i]+"</a>";
        }
        
        breadcrumbTrail+="</p>";
        document.getElementById("breadcrumb").innerHTML=breadcrumbTrail;
    }
    //--><!]]>    
    </script>
</head>
<body>
    <div id="breadcrumb"></div>
</body>
</html>

转载于:https://my.oschina.net/dingjunnan/blog/191493