dede使用方法---用js让当前导航高亮显示
2024-08-25 20:39:45
当前导航高亮显示能够提升用户体验，我也知道，大家在网上搜dede让当前导航高亮显示的方法一抓一大把，但是，并不一定适合自己的需求。就像我的需求一样，导航有个二级导航，然后需要做到让当前导航高亮显示。我最开始用的方法是dede自带的让当前导航高亮显示的方法，代码如下，其中主要实现的代码就是那一句currentstyle="<li 'menu_on'><a href='~typelink~' >~typename~</a> </li>：
<div id="menu">
<ul>
<li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='menu_on'":@me="";{/dede:field}><a href="/">网站首页</a></li>
{dede:channel type='top' row='8' currentstyle="<li
'menu_on'><a href='~typelink~' >~typename~</a>
</li>" }
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
<ul>
<li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='menu_on'":@me="";{/dede:field}><a href="/">网站首页</a></li>
{dede:channel type='top' row='8' currentstyle="<li
'menu_on'><a href='~typelink~' >~typename~</a>
</li>" }
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
但是发现，我无法让它与二级导航很好的融入到一起，当然，这可能是我自个的原因，因为我个人对php并不太熟悉，所以可能dede的二次开发牵扯到php的时候会有点阻碍。没办法了，只能用自己手上的工具另外杀一条路出来。想到用js的方法实现，百度方法也是一大堆，经过很多次尝试之后，终于找到了有用的了。代码如下：
<script type="text/javascript">
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
var links = myNav[i].getAttribute("href");
var myURL = document.location.href;
if(myURL.indexOf(links) != -1){
myNav[i].className="active";
}
}
</script>
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
var links = myNav[i].getAttribute("href");
var myURL = document.location.href;
if(myURL.indexOf(links) != -1){
myNav[i].className="active";
}
}
</script>
其中"active"就是你当前导航高亮显示的样式名。
导航的代码截图如下所示：
最新文章
- HR开发 操作信息类型数据
- ue4 Worldmachine 结合使用
- python-ldap实现登录案例
- 初试MarkDown
- 可以返回执行结果的system函数加强版本
- 在ASP.NET中实现OAuth2.0（二）之打造自己的API安全策略
- 高可用软件Keepalived
- 在iOS的XCode工程配置中为什么要用-all_load&-ObjC
- 回答了个问题，9x9 乘法表生成器
- 怎么样学好C++
- FTP创建与操作
- Android RxJava使用介绍（三） RxJava的操作符
- 巧用ajax请求服务器加载数据列表时提示loading
- 六、编写第一个应用【外部nodejs调用】
- Java使用reids，以及redis与shiro集成
- charles抓包https/模拟弱网/设置断点重定向/压测
- Delphi函数的out、var等关键字的作用，和使用场景
- python---基础知识回顾（十一）图像处理模块PIL
- windows 下 gdb 的安装
- delphi完美经典--第十八章