平时用thinkcmf网站开发经常需要导航点击之后高亮,就写了一些实现方法分享一下。

思路很简单,先获取当前页面的顶级栏目的地址,然后与导航中的地址比较,相同的就加上一个class,把下面函数理解了不管一级、二级、三级都能做。

1、添加函数

  1. /*获取当前栏目的顶级栏目地址适用2级栏目*/
  2. function _get_top_url($c,$id){
  3. $arr['href']['action']="Portal/".$c."/index";
  4. $arr['href']['param']['id']=$id;
  5. $nav=M('nav');
  6. $rs=$nav->select();
  7. foreach($rs as $k=>$v){
  8. $rs[$k]['href']=unserialize(stripslashes($v['href']));
  9. }
  10.  
  11. foreach($rs as $k=>$v){
  12. if($v['href']==$arr['href']){
  13. $a=$v;
  14. }
  15. }
  16. if($a['parentid']==0){
  17. $href=$a['href'];
  18. }else{
  19. $id=$a['parentid'];
  20. $result=$nav->find($id);
  21. $href=unserialize(stripslashes($result['href']));
  22. }
  23.  
  24. if($href){
  25. $href=leuu($href['action'],array('id'=>$href['param']['id']));
  26. $default_app=strtolower(C("DEFAULT_MODULE"));
  27. $g=C("VAR_MODULE");
  28. $href=preg_replace("/\/$default_app\//", "/",$href);
  29. $href=preg_replace("/$g=$default_app&/", "",$href);
  30. }else{
  31. $href="/";
  32. }
  33. /*去除g=Portal*/
  34. //判断URL模式
  35. if( preg_match ( '/php\?g=/' , $href ) ){
  36. $href = preg_replace ( '/g=Portal\&/' , '' , $href );
  37. }else{
  38. $href = preg_replace ( '/Portal\//' , '' , $href );
  39. }
  40. /*转化为小写*/
  41. $href = strtolower($href);
  42. return $href;
  43. }

2、模板调用

  1. <php>
  2. /*获取主导航*/
  3. $menu=sp_get_menu_tree(1);
  4. /*获取当前页面的顶级栏目的地址*/
  5. if(CONTROLLER_NAME=="Article"){
  6. $url=get_top_url("List",$term_id);
  7. }else{
  8. $url=get_top_url(CONTROLLER_NAME,$_GET['id']);
  9. }
      //上传到服务器时,可删除下面行,为了本地测试所用 http://localhost/gupiao/
      //$url = '/gupiao' . $url;
  10. </php>
  1. <volist name="menu" id="vo" key="k">
  2.   /*判断当前页面的顶级栏目的地址$url与导航中的链接$vo["href"]是否一样*/
  3.       <li  class="n1 <eq name='url' value='$vo["href"]'>selected_u</eq>">
  4.            <a href="{$vo['href']}" target="{$vo['target']}">{$vo['label']}</a>
  5.          <notempty name="vo['child']">
  6.            <ul class="navMoreUL">
  7.               <volist name="vo['child']" id="v">
  8.                    <li><a href="{$v['href']}" target="{$v['target']}">{$v['label']}</a></li>
  9.                </volist>
  10.            </ul>
  11.        </notempty>
  12.        </li>
  13. </volist>
  1.  

thinkcmf 导航高亮制作方法(适用于多级导航)(通用)的更多相关文章

  1. thinkphp导航高亮的方法

    因为引入了公共的 header.html,所以需要使用 js来实现向 li 加入active的高亮属性,这里我通过url地址和href的地址进行判断 // 这里对当前页面导航高亮 $(function ...

  2. thinkphp实现导航高亮的简单方法

    经常会涉及到关于导航菜单高亮显示的问题,大多是通过配合js或者事先分配变量的方式来实现导航高亮的,这里提供另一种思路参考: <ul class="usermenu"> ...

  3. JS原生代码实现导航高亮

    一 实现原理 根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联,并对相应的导航设置高亮样式. 二 代码解析 先简单写一个页面顶端的导航栏:<nav>  <ul> ...

  4. vue使用原生js实现滚动页面跟踪导航高亮

    需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...

  5. 讲解版的导航高亮(新手福利)原生JS

    1.先写样式: 导航的排版样式: 导航对应高亮样式: .d6000f{ background:red; } .d6000f a{ color:#fff; } 我这个地方导航高亮样式为背景红色,字体颜色 ...

  6. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  7. 使用css3和伪元素制作的一个立体导航条

    使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

  8. js手机对应的多级导航分享

    js移动导航对应,您可以使用自适应时屏幕,当小画面在一定程度上的网站.使导航出现,The navigation effects such as the following figures:多级导航! ...

  9. Android (争取做到)最全的底部导航栏实现方法

    本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...

随机推荐

  1. JS高级特性

    一.JavaScript的同源策略 参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Same_origin_policy_fo ...

  2. 爬虫(二)建立代理ip池

    之前我们说网站反爬虫的一个常用方法是检测ip,限制访问频率.所以我们要通过设置代理ip的办法绕过这个限制.有不少提供免费代理ip的网站,像https://www.xicidaili.com/nt/,我 ...

  3. osg::BlendFunc来设置透明度

    osg::BlendFunc介绍 混合是什么呢?混合就是把两种颜色混在一起.具体一点,就是把某一像素位置原来的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果.      假设我们需要 ...

  4. JavaScript数据可视化编程书籍上面的例子(flotr2)

    先看demo再看例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. 微信小程序之组件的集合(五)

    这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内 ...

  6. 廖雪峰Java10加密与安全-4加密算法-5非对称加密算法

    1.非对称加密 非对称加密就是加密和解密使用的不是相同的密钥 方法1: * 加密:用自己的私钥加密,然后发送给对方:encrypt(privateKeyA, message)->s * 解密:对 ...

  7. php冒泡算法

    1.冒泡算法 网上搜了很多,但是总是对于每次循环的边界值思路讲的比较笼统. 不是很容易被新手记住,我自己平时也是硬记下来的. 但是对于算法,硬记,时间长了还是容易忘记,所以自己写了一次,把每次思路尽量 ...

  8. vue.js_05_vue.js的过滤器

    1.过滤器的定义和使用 实现:将页面的中的单纯替换成,用户传来的文字. 全局过滤器:所有的Vue对象都可以使用 <body> <div id="app"> ...

  9. utils04_搭建私有Git服务器

    1.远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改.GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想公开源代码,又舍不得给G ...

  10. Spring注解驱动开发(四)-----aop、声明式事务

    AOP 概念 指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式:-----基于动态代理 一个aop示例 1.导入aop模块:Spring AOP:(spring-aspects ...