js面包屑导航怎么做是怎么实现的,可以提供一下思路么?

&&&您需要以后才能回答,未注册用户请先。面包屑导航的四种情况
面包屑导航通常有两种性质的:
第一种:用来展示用户访问进程记录,这种导航最大的作用就是能让用户随时返回到从前访问过的分类,而它却有一个最大的缺点,它的分类和主分类都是以用户的浏览过程为基础,如果你的站点存在许多分类或子分类,很有可能在用户点选其它分类的内容时,导航的内容与分类不符,让用户产生迷糊。
第二种:真实展现网站的分类结构,实时显示用户正在浏览的“线路图”,这种导航在一定程度上可以实现第一种的功能,同时也是最理想的做法,下面我就给你讲讲做法与思路。
至于做法,有许多种方案,这些方案实现的原理不一而同:
如果你的网站目录按照分类的格局,分别存放在不同的文件夹下,你可以使用PHP、也可以使用javascript,但PHP的方式使用起来,更有利于SEO搜索引擎优化,因为这种方法可以爬站蜘蛛轻松识别到,实现的方法可以使用PHP的$_SERVER变量,得到页面的URL,然后再进行处理。比如使用php的str()系列函数,或ereg()系列函数。当然也要以采用下列的任何方法
你的网站使用的是PHP对吧?那么数据多数是存入数据库了对吧?那么你的MYSQL建立了目录分类对吧?甚至有可能做了级联结束或内连接对吧?那么你在读取网页内容的时候,可以从数据库提取分类信息,按部就班地列到导航面包屑上去,这种做法甚至比第一种来得还要轻松。
如果你的数据库分类也不是十分明确(当然,如果达到这一步,那你的网站质量实在是有待商榷了),那么你干脆在你的数据库中新建一个字段吧,把该文章的面包屑导航链接放到该条记录中去,到时候直接提取就OK了。
4. 你的页面使用了静态?那更好办了,直接写到你的页面上去吧,动不动态已经无关紧要了。
已投稿到:
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。|& |& |& |&
|& |& |& |& |&
|& |& |& |& |& |& |& |& |& |&
|& |& |& |&
|& |& |& |& |& |& |&
网页中的面包屑导航条设计原理
来源:腾讯 UED 西贝
导读:面包屑通常水平地出现在页面顶部,一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接(这些链接也是能到达当前页面的路径),在层级架构中通常是这个页面的父级页面。
先谈一下面包屑的由来:&&&&&& 很久很久以前,在大森林的边上住着一个贫穷的樵夫,他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔,女儿名叫格莱特。后来樵夫的妻子去世了,他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处,然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划,于是偷偷地把一块面包藏在了口袋里。&&&&&& 在去森林的路上,汉赛尔悄悄地捏碎了他的面包,并不时地停下脚步,把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了,汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说:&等月亮一出来,我们就看得见我撒在地上的面包屑了,它一定会指给我们回家的路。&但是当月亮升起来时,他们在地上却怎么也找不到一点面包屑了,原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。&这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始,汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上,然后迅速地撒遍了全世界,变成了今天大家所熟知的&面包屑导航&。&再了解一下面包屑导航的定义:
维基百科上关于面包屑的定义,把Websites那部分解释一下就是这样:&&&&&&& 面包屑通常水平地出现在页面顶部,一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接(这些链接也是能到达当前页面的路径),在层级架构中通常是这个页面的父级页面。&&&&&&& 面包屑提供给用户回溯到网站首页或入口页面的一条快速路径,它们绝大部分看起来就像这样:首页&分类页&次级分类页&以下是英文摘录:Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:Home page & Section page & Subsection page&其次说说面包屑的作用:&一是:提供了多路径的交互方式,方便用户跳转到其它页面;
二是:从一个侧面展示了该信息集合的信息结构和集合方式。
三是:&面包屑&信息结构对于网站的SEO也有着大的好处,它可以更多的强调网站关键字,扩大关键字的范围,优化网站的SEO。
&面包屑包含三种:&1、& 定位面包屑路径&&&&&&&& 面包屑路径中最常见的一种。当前页面路径在商城有唯一的位置。&&&&&&&& 基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别(一般是多于两级)的导航方案。在下面的例子中(来自于SitePoint),每一个页面的文本链接表示它比它右边的文本链接高一级。&举例(来自蓝色理想论坛):/article/introducing-joomla/
&&&&&&&&&&&&&
&&A& 表明当前在网站内的位置。
&B& 提供指向先前访问过的页面(或网站)和其他区域的捷径。
本质上,它是网站结构的线性表示。Web上的定位面包屑路径所展示的不是导航的历史,而是在整个网站中某个固定的位置。就是说,不管用户是如何到达location 页面,面包屑路径都是一样的。&&2、&& 路线面包屑路径&&&&&&&& 路线面包屑是动态的。当前页面路径是根据用户的点击产生的。&&&&&&& 根据到达方式的不同,特定页面上的面包屑路径也不同。基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤,它们显示用户在到达当前页面之前访问过的页面。&举例:/旧版& qzone旧版路径&&3、& 属性面包屑路径&&&&&&& 当前页面可以通过N条路径找到。&&&&&& 属性面包屑是描述一个页面的方式,不是它在网站中的位置,也不是访问的路径,而是它在某种元数据方案中的位置,这种方案往往是主题层级的。基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。&举例:A、在Newegg,面包屑路径表示在一个特定页面显示的特性内容。这个页面显示所有拥有由Lian Li制造并有MicroATX微塔式因素的电脑机箱。
&&&&&&&&&&&&
B、amazon ,面包屑表达的是物品所属类别,并允许点击类别名称访问上级的类别。整条路径提供了最低一级的页面。也就是说提供了多条通往结点页面的情况。
&&&&&&&&&&&
& 下一篇:
推荐网页设计教程
设计教程分类
设计教程分类面包屑导航(当前位置)的实现
面包屑导航(当前位置)的实现
在我们进行网站开发的时候很多情况下都会编写一个当前位置,这个当前位置主要用来提示用户现在所处网页的位置。下面我们利用一个实例进行讲解:1、当栏目只有一级栏目的时候,我们的当前位置可以这样写:首页》系统软件》生活闹钟。其中生活闹钟是系统软件栏目下面的一篇文章,当我们浏览这篇文章的时候,面包屑导航就是上面的样子。那么在模板中可以这样写:&a href='&{$home}&'&首页&/a& → &a href='&{$categoryurl}&'&&{$category}&&/a& → &{$title}&解释:因为目前我们所在的是文章页面,也就是位于item_display模板中,那么在模板中可以直接使用栏目、栏目地址和文章题目的变量。2、当一级栏目下面又有很多个栏目时,那么第一种方式显然已经不能够正确的显示出我们的当前位置了,那么我们就要另谋途径了,接下来的这个方法就是面包屑导航,在面包屑导航中,我们应使用getcategories函数以及其相关的参数childcategory。下面我们以示例进行讲解。在文章页面我们可能会看到这样的面包屑导航: 首页 → 系统软件 → 系统工具 → 生活闹钟 。其中“系统软件”是一级栏目,“系统工具”是“系统软件”的子栏目,也可以叫做二级目,“生活闹钟”是位于“系统工具”中的一篇文章。在文章页面可以使用的与栏目相关的变量有:categoryname,然而它只能获取文章所属栏目的名称,却不能获取其爷爷级元素,那么第一种写面包屑导航(当前位置)的办法就失效了。当前的写法如下:&a href='&{$home}&'&首页&/a&→&{getcategories childcategory=$category colspan=&1& overflow=&→& template=&&a href='[url]'&[category]&/a&&}&→&a href='&{$url}&'&&{$title}&&/a&,childcategory应该与colspan和overflow合用,colspan规定了子循环的步幅数,overflow规定了子循环结束后应该插入什么内容,childcategory指定获取哪个栏目的子栏目或者是父级栏目。在这个例子中,$category这个变量是文章所属栏目的id,那么通过赋值给childcategory,系统自动帮我们分析出了它的父级栏目和子栏目,父栏目可以追溯到根栏目,子栏目可以延伸到文章当前所属的栏目。(讨论贴)面包屑导航如何实现,个人之见,勿喷【java吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:663,709贴子:
(讨论贴)面包屑导航如何实现,个人之见,勿喷收藏
楼主大学狗加自学党,再加上没有工作经验,路径导航可能在大家看来很简单的一个东西,楼主确实没实现出来!最近突然要用到这个,就想了想实现方法,就是不知道对错,深夜来一贴先谈谈想法,明天再去实现!
2017java学习来上市公司博为峰学java,入学即签就业协议,不就业不收费,查看java课程!java好学吗?java课程来博为峰学,java工程师就业年薪十几万!
一楼先送上祝福,大家新年快乐咯
思路一:)面包屑导航条跟导航条一样在模板template页面,也就是跟导航条一样,改变页面只时不会动态替换的!1.当页面较少,路径分支不会很复杂,路径树节点少时,我觉得可以把所有路径在都写出来并单独给每个路径一个id,放到switch case里面,前台不同页面请求时传给后台这个id值去switch里面匹配对应的case,并返回路径数据到前台!
2.给每个页面一个name值,放到session里面,好了,写到这我自己都不忍心往下想了,怎么都觉得这是在瞎搞,此想法吧友有补充不
)为了这,我去淘宝看了下,页面那么多,类似页面一大堆,思路一.1的方法明显觉得不可靠了,路径树节点太多,排列组合起来,估计这费脑还不一定能干出来的事没几个人愿意搞吧,所以,我觉得此处面包屑导航条就不需要放到template里面了,在每一个页面都写一个面包屑导航条貌似要省事得多,虽然也费力,但个人觉得不费脑了!
好不容易水个贴,就没人出来看一看吗
技术水,赞一个。手机就十几是不是金丝氨基谁叫你睡觉睡觉,凑够十五字,没啥意思
ul 结合ajax动态实现
兄弟连教育&拉勾网强强联合打造JavaEE.战狼班,Java培训后付费非贷款,入学兄弟连java战狼班,拉勾网战略合作,高起点出Java精英.
大过年的歇一歇吧
登录百度帐号推荐应用

我要回帖

更多关于 面包屑导航代码 的文章

 

随机推荐