Jtti广告广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >php怎么实现面包屑导航
  • 818
分享到

php怎么实现面包屑导航

php面包屑导航 2020-02-14 13:02:52 818人浏览 猪猪侠
摘要

本文操作环境:windows10系统、PHP 7、thinkpad t480电脑。面包屑导航的作用是告诉访问者它们在网站中的位置以及如何返回。可能很多小伙伴对面包屑导航不太了解,其实它来自于一个童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿

本文操作环境:windows10系统、PHP 7、thinkpad t480电脑。

面包屑导航的作用是告诉访问者它们在网站中的位置以及如何返回。可能很多小伙伴对面包屑导航不太了解,其实它来自于一个童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。

面包屑导航有三种类型,分别是:

一、基于位置的面包屑导航

这种类型是最常见的。这种类型的面包屑导航可以很好的指出当前页面与整个站点的层次结构。这种面包屑导航可以显示当前页面的前一个页面或者目录的链接。可以使访客了解自己的位置,以及可以更快的找到自己想要到达的页面。可以很好的提高用户的友好体验。

二、基于属性的面包屑导航

这种面包屑导航最常出现电子商务站点。这种面包屑导航可以很好的指出当前页面内产品的其他属性或者类别。对于一个产品来说,所具有的属性往往不只有一种,而通过这种面包屑导航可以给消费者一个更加直观的了解。

三、基于路径的面包屑导航

这种面包屑导航是最不常见到的。这种面包屑导航和上文所说的童话故事类型很像。他们可以显示访客在到达页面前所访问过的网页的链接。这种面包屑导航不是很受欢迎,因为他们的功能基本上是和前进和后退的按钮是一样的。

那么我们该如何实现面包屑导航呢?下面就让我们一起来看看具体的实现代码吧!

具体实现代码如下所示:

<?php 

public function mbx($cat_id){
    //获取当前cat_id的该条信息
    $row = D('cat')->find($cat_id);
    $tree[] = $row;//将该条数据放入数组中
    while($row['parent_id']>0){//只要该条数据的parent_id>0
        $row = D('cat_id')->fine($row['parent_id']);
        $tree[] = $row;
    }
    //array_reverse();返回翻转数据的数组
    return array_reverse($tree);//翻转数据
}

//修改对应的显示到模板中的方法
public function Goods(){
    //获取该条数据的信息
    $goods_info = D('goods')->find( I ('get.goods_id') );
    //打印该条信息的面包屑导航
    //var_dump($this->mbx($goods_info['cat_id']));
    $this->assign('mbx' , $this->mbx($goods_info['cat_id']));
    $this->assign('goods' , $goods_info);
    $this->play();
}

//显示到模板中
当前位置
<a href="">首页</a>
<foreach name=" mbx " item = " mb ">
<a href=" " >{}</a>
<code> > </code>
</foreach>
{$goods['goods_name']}
 ?>
}

--结束END--

本文标题: php怎么实现面包屑导航

本文链接: https://www.lsjlt.com/news/140.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue项目实现面包屑导航
    本文实例为大家分享了vue项目实现面包屑导航的具体代码,供大家参考,具体内容如下 安装依赖 npm i vuex 创建 tagView.vue <template>  ...
    492
    2023-09-27
    vue 面包屑导航
  • vue实现动态面包屑导航
    本文实例为大家分享了vue实现动态面包屑导航的具体代码,供大家参考,具体内容如下 动态面包屑导航是根据路由中的matched获取到的单独提取出面包屑导航栏组件 <templat...
    344
    2023-09-27
    vue动态面包屑导航 vue面包屑导航 vue动态导航
  • vue项目怎么实现面包屑导航
    这篇文章主要介绍“vue项目怎么实现面包屑导航”,在日常操作中,相信很多人在vue项目怎么实现面包屑导航问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目怎么实现面包屑导航”的疑惑有所帮助!接下来,请跟...
    864
    2023-09-27
  • css如何实现面包屑导航
    这篇文章主要介绍了css如何实现面包屑导航,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   居中分页   如果要让分页居中,可以在容器...
    479
    2023-09-27
    css
  • vue面包屑导航组件封装
    目录一、为什么需要面包屑?二、初级封装1. 实现思路2. 代码演示3. 使用4. 不足三、进阶封装1. 实现思路2. 代码演示3. 使用4. 不足四、高阶封装1. 思路2. 代码演示...
    788
    2023-09-27
    vue 面包屑导航 vue 面包屑
  • vue怎么制作面包屑导航栏
    这篇文章主要介绍了vue怎么制作面包屑导航栏的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么制作面包屑导航栏文章都会有所收获,下面我们一起来看看吧。Main.jsvar routeList&n...
    883
    2023-09-27
  • web开发如何实现面包屑导航
    这篇文章给大家分享的是有关web开发如何实现面包屑导航的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先我们来看看面包屑导航的作用:1、让用户了解当前所处位置,以及当前页面在整个...
    952
    2023-09-27
    web开发
  • vue怎么实现面包屑
    本文小编为大家详细介绍“vue怎么实现面包屑”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现面包屑”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue中面包屑的实现方法,供大家参考,具体内容如下面包...
    189
    2023-09-27
  • Bootstrap中如何添加面包屑导航
    这篇文章主要讲解了“Bootstrap中如何添加面包屑导航”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Bootstrap中如何添加面包屑导航”吧!1 面包...
    367
    2023-09-27
    bootstrap
  • Vue2+element-ui实现面包屑导航
    本文实例为大家分享了Vue2+element-ui实现面包屑导航的具体代码,供大家参考,具体内容如下 1、面包屑导航栏布局 代码: <template>     <...
    871
    2023-09-27
    Vue2 elemen ui 面包屑导航
  • vue实现面包屑的方法
    vue中面包屑的实现方法,供大家参考,具体内容如下 面包屑是什么: 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或...
    781
    2023-09-27
    vue 面包屑
  • CSS3如何实现圆形风格面包屑导航
    小编给大家分享一下CSS3如何实现圆形风格面包屑导航,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!<html><...
    699
    2023-09-27
    css3
  • vue.js怎么实现动态面包屑
    本篇内容介绍了“vue.js怎么实现动态面包屑”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!需求描述:点击左侧的导航,跳转到不同的页面,并且...
    512
    2023-09-27
  • vue+elementUI实现动态面包屑
    本文实例为大家分享了vue+elementUI实现动态面包屑的具体代码,供大家参考,具体内容如下 引言 后台管理系统中,经常会出现需要面包屑的情况,但是又不想每个页面都实现一个,这样...
    714
    2023-09-27
    vue elementUI 面包屑
  • vue.js实现动态面包屑
    最近在学习vue,正好手上有个项目还是用jquery写的,就自己尝试将这个项目的前端用vue实现,途中遇到了动态面包屑的问题,特此记录一下,如有不对的地方,欢迎指正. 需求描述: 点...
    251
    2023-09-27
    vue.js 面包屑
  • css如何使用伪元素:before实现的面包屑导航栏
    小编给大家分享一下css如何使用伪元素:before实现的面包屑导航栏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!伪元素:be...
    899
    2023-09-27
    css before
  • 如何利用React高阶组件实现一个面包屑导航
    本篇内容介绍了“如何利用React高阶组件实现一个面包屑导航”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是 react 高阶组件rea...
    267
    2023-09-27
  • React高阶组件如何创建一个面包屑导航
    这篇文章主要介绍“React高阶组件如何创建一个面包屑导航”,在日常操作中,相信很多人在React高阶组件如何创建一个面包屑导航问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React高阶组件如何创建一个面包...
    237
    2023-09-27
  • vue面包屑组件的封装方法
    vue中自己封装面包屑组件,供大家参考,具体内容如下 要实现效果 前言 很多电商类产品都需要实现面包屑导航,用来优化用户体验 一、初级面包屑封装组件 1.封装基础结构组件 Brea...
    620
    2023-09-27
    vue 面包屑组件
  • AngularJS怎么自定义指令实现面包屑功能
    这篇文章主要介绍了AngularJS怎么自定义指令实现面包屑功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:<!DOCTY...
    331
    2023-09-27
    angularjs
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作