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

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

1、添加函数

/*获取当前栏目的顶级栏目地址适用2级栏目*/
function _get_top_url($c,$id){
$arr['href']['action']="Portal/".$c."/index";
$arr['href']['param']['id']=$id;
$nav=M('nav');
$rs=$nav->select();
foreach($rs as $k=>$v){
$rs[$k]['href']=unserialize(stripslashes($v['href']));
} foreach($rs as $k=>$v){
if($v['href']==$arr['href']){
$a=$v;
}
}
if($a['parentid']==0){
$href=$a['href'];
}else{
$id=$a['parentid'];
$result=$nav->find($id);
$href=unserialize(stripslashes($result['href']));
} if($href){
$href=leuu($href['action'],array('id'=>$href['param']['id']));
$default_app=strtolower(C("DEFAULT_MODULE"));
$g=C("VAR_MODULE");
$href=preg_replace("/\/$default_app\//", "/",$href);
$href=preg_replace("/$g=$default_app&/", "",$href);
}else{
$href="/";
}
/*去除g=Portal*/
//判断URL模式
if( preg_match ( '/php\?g=/' , $href ) ){
$href = preg_replace ( '/g=Portal\&/' , '' , $href );
}else{
$href = preg_replace ( '/Portal\//' , '' , $href );
}
/*转化为小写*/
$href = strtolower($href);
return $href;
}

2、模板调用

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

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. <scrapy爬虫>爬取腾讯社招信息

    1.创建scrapy项目 dos窗口输入: scrapy startproject tencent cd tencent 2.编写item.py文件(相当于编写模板,需要爬取的数据在这里定义) # - ...

  2. <每日一题>题目16:简单的python练习题(1-10)

    #1.python程序中__name__的作用是什么? __name__这个系统变量用来表示程序的运行方式. 如果程序在当前膜快运行,__name__的名称就是__main__, 如果不在(被调用), ...

  3. 基于neighborhood models(item-based) 的个性化推荐系统

    文章主要介绍的是koren 08年发的论文[1],  2.2neighborhood models部分内容(其余部分会陆续补充上来). koren论文中用到netflix 数据集, 过于大, 在普通的 ...

  4. 2019-10-31-C#-dotnet-获取整个局域网的-ip-地址

    title author date CreateTime categories C# dotnet 获取整个局域网的 ip 地址 lindexi 2019-10-31 08:57:55 +0800 2 ...

  5. Vuex持久化存储之vuex-persist

    在引入mapMutations时报错,解决方法: 1:npm install --save-dev babel-plugin-transform-object-rest-spread 2:在packa ...

  6. 使用git命令将本地项目推送到远程仓库

    将本地项目推送到远程仓库 这里先放一张图, 有助于理解git命令 1. 在GitHub上新建一个仓库 注意不要勾选自动生成README.md文件, 否则会产生某些问题, README.md文件到时可以 ...

  7. python中defaultdict方法的使用

    默认值可以很方便 众所周知,在Python中如果访问字典中不存在的键,会引发KeyError异常(JavaScript中如果对象中不存在某个属性,则返回undefined).但是有时候,字典中的每个键 ...

  8. 廖雪峰Java11多线程编程-1线程的概念-3线程的状态

    1线程的状态 线程终止的的原因: run()或call()方法执行完成,线程正常结束 线程抛出一个未捕获的Exception或Error 直接调用该线程的stop()方法来结束该线程--该方法容易导致 ...

  9. Python Flask学习之安装SQL,python3,Pycharm(网上下载安装即可)

    1,下载时更改pypi源.可以额外安装虚拟化环境:pip install -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.co ...

  10. 洛谷 P3750 [六省联考2017]分手是祝愿

    传送门 题解 //Achen #include<algorithm> #include<iostream> #include<cstring> #include&l ...