开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

dedecms 用js高亮当前栏目

DedeCMS 是一个基于 PHP 的内容管理系统（CMS），它允许用户轻松地创建和管理网站内容。在使用 DedeCMS 时，有时需要高亮显示当前用户所在的栏目，以提供更好的用户体验。这通常通过 JavaScript 来实现。

基础概念

高亮当前栏目的目的是为了突出显示用户当前浏览的栏目，使得导航更加直观。这通常通过在导航菜单中为当前栏目添加一个特殊的 CSS 类来实现，然后通过 CSS 来定义这个类的样式，比如改变背景色或字体颜色。

相关优势

用户体验：用户可以快速识别当前所在的位置，提高导航的直观性。
设计美观：通过高亮显示，可以增强网站的整体设计感。

类型

前端高亮：使用 JavaScript 或 jQuery 在客户端实现。
后端高亮：在服务器端生成 HTML 时，根据当前 URL 动态添加高亮类。

应用场景

适用于任何需要导航栏并且希望突出显示当前栏目的网站。

实现方法

以下是一个使用 JavaScript 实现 DedeCMS 高亮当前栏目的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DedeCMS 高亮当前栏目示例</title>
<style>
  .current {
    background-color: #f1f1f1;
    font-weight: bold;
  }
</style>
<script>
  window.onload = function() {
    var currentPath = window.location.pathname;
    var links = document.querySelectorAll('nav a');
    links.forEach(function(link) {
      if (link.getAttribute('href') === currentPath) {
        link.classList.add('current');
      }
    });
  };
</script>
</head>
<body>
<nav>
  <a href="/home/">首页</a>
  <a href="/about/">关于我们</a>
  <a href="/services/">服务</a>
  <a href="/contact/">联系我们</a>
</nav>
<!-- 页面内容 -->
</body>
</html>

可能遇到的问题及解决方法

路径匹配问题：如果 URL 中包含查询参数或锚点，直接比较 href 和 window.location.pathname 可能不会匹配。解决方法是使用正则表达式来提取路径部分进行比较。

var currentPath = window.location.pathname.replace(/\/\w+$/, '');

异步加载内容：如果导航栏是通过 AJAX 或其他异步方式加载的，上述脚本可能无法正确工作。解决方法是确保脚本在导航栏加载完成后执行，或者使用事件委托。

document.addEventListener('DOMContentLoaded', function() {
  // 上面的脚本代码
});

多级菜单：对于复杂的导航结构，可能需要递归地检查子菜单项。

function highlightCurrentLink(links) {
  links.forEach(function(link) {
    if (link.getAttribute('href') === currentPath) {
      link.classList.add('current');
    } else if (link.querySelector('ul')) {
      highlightCurrentLink(link.querySelectorAll('ul a'));
    }
  });
}

参考链接

通过上述方法，你可以实现 DedeCMS 中当前栏目的高亮显示，提升网站的用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

dedecms调用当前栏目的子栏目怎么操作

有时我们建网站会建很多分类，每个分类又有小分类，为了让顶级栏目获得更好的权重和排名，我们会聚合子栏目。那么dedecms调用当前栏目的子栏目怎么操作呢？　　...typename/] {/dede:channel} 　　细心的朋友可能会发现，其实这两种方法是类似的，只是写法不同而已　　有这方面需求的朋友可以去试试噢　　2016.7.12升级版来了，dedecms...提取某栏目及子栏目名称到首页怎么弄？　　...下一篇ytkah的文章更精彩：dedecms如何调用当前栏目的子栏目及子栏目文章　　相关文章：dedecms获取当前文章所在栏目URL

10.1K6 0

dedecms如何调用当前栏目的子栏目及子栏目文章

前面ytkah谈到了 dedecms调用当前栏目的子栏目怎么操作，有的朋友会问如果再增加一个调用子栏目文章的需求，即调用当前栏目的子栏目及子栏目文章，这个有办法实现吗？... {/dede:arclist} {/dede:channelartlist} 　　经测试，dedecms...5.7版可以成功，样式自己定义调整，标题长度（titlelen）、调用文章条数（row）自行设置，感兴趣的朋友去echo一下吧　　相关文章：dedecms获取当前文章所在栏目URL

9.5K4 0

dedecms获取当前文章所在栏目URL

我们知道dedecms有一个面包屑导航的调用函数，{dede:field name='position'/}，这个样式是固定的，有时要个性化一些的话需要修改很多地方，那么织梦cms有没其他方法获取当前文章所在栏目...这样的话就可以自定义首页链接的锚文本了，默认都是“首页”，我们都知道锚文本对内部链接/外部链接很重要，虽然可以通过修改内部class文件(/include/typelink.class.php的113行左右)来修改，具体详见修改dedecms...面包屑导航的首页链接关键字（帝国cms面包屑导航的首页链接锚文本改成关键字），但为了程序的稳定性最好不好去动，所以上面的方法就比较方便了　　关于dedecms栏目调用方面ytkah还有两篇文章页很精彩噢...，dedecms调用当前栏目的子栏目怎么操作，dedecms如何调用当前栏目的子栏目及子栏目文章，

10.7K8 0

DEDECMS织梦保存当前栏目更改时失败的解决方法

织梦编辑栏目时提示“保存当前栏目更改时失败，请检查你的输入资料是否存在问题！”那是因为你的后台栏目编辑文件php里有做过二次开发，添加了栏目数据表里不存在的字段。...解决方法1、打开 /dede/catalog_edit.php 找到 (大概在68行左右)ShowMsg("保存当前栏目更改时失败，请检查你的输入资料是否存在问题！"...,"-1");在它上面加入echo $upquery;die;如图2、保存后，继续去编辑修改某个栏目，看页面输出的代码，全选，复制把复制到的语句到后台-系统-SQL命令行工具，执行，看执行结果提示什么错误...4、把刚才加在 /dede/catalog_edit.php 里面的echo $upquery;die;删除，保存再去编辑栏目，就不会报错啦。

5.4K4 0

Phpcms V9采用if语句判断当前栏目高亮、判断分类信息是否过期

在用PC V9建站的时候，很多朋友会想到Phpcms V9判定当前栏目，让当前栏目高亮的功能，在这里分享判断当前栏目、当前栏目高亮的代码，同时在此要分享if语句判断分类信息是否过期，CMSYOU给力。...Phpcms V9判定当前栏目，让当前栏目高亮如果是在栏目列表（非单独页面）下，Phpcms V9判定当前栏目让当前栏目高亮代码可以用下面的调用代码： {pc:content action="category...，可以用下面的调用代码： {loop $arrchild_arr $cid} 当前栏目进行了判定，定义了class为current的类，于是可以在css中定义current的样式，实现phpcms中当前栏目的名称样式显示不一样！...}已经过期{else}截止{$r[endtime]}{/if} 实际上，Phpcms V9判断当前栏目高亮

2.6K2 0

解决DEDECMS织梦生成静态出现504 Gateway time-out问题

我们有不少网友目前在使用DEDECMS织梦程序或者帝国CMS这类可以生成静态HTML的CMS是比较多的，毕竟在大数据的时候还是静态网站占用资源是比较少的。...昨天老蒋遇到一个网友在服务器中有搭建宝塔面板，且是有安装DEDECMS程序的，由于他要调整一个广告位，设置之后要全站生效，必须要要重新生成HTML，于是在生成全站HTML的时候出现"504 Gateway...其实对于我们来说基本上可以判断出来，当前的服务器负载过大导致的，我们需要增加服务器的配置来适应这样的大功率的生成静态文件的使用占用资源。我给他先在宝塔面板NGINX配置中调整配置参数的。...所以我准备采用的办法是分目录生成，一个栏目一个栏目生成，这样是解决的。...最后，一般遇到这样的问题，我们采用JS调用广告的模式，我们可以将广告设置在JS中，这样在需要调整的时候只需要变动JS的内容，就不要再生成HTML，一般大数据的HTML页面是很少去全站生成静态的。

1.7K5 0

如何在后台增加dedecms栏目图片字段并在前台实现调用

dedecms默认是没有栏目图片功能的，为了便于灵活管理就给每个栏目增加一个栏目图片的功能，栏目图片是在代码中添加的固定图片，通过改造可以实现这个功能的，下面就随ytkah一起来试试吧 1....首先，给栏目分类表`dede_arctype`表增加缩略图字段`typeimg`，用phpMyAdmin或其他数据库管理工具，直接在数据表中添加该字段，或者运行下面的SQL语句： alter table...： js/main.js"> 2.2 打开dede/catalog_add.php页面，保存上传栏目图片的内容，查找...文件 js/main.js"> 2.4 打开dede/catalog_edit.php，查找 $upquery =...在下面添加：$linkOkstr = str_replace("~typeimg~",$row['typeimg'],$linkOkstr);这时，我们再到后台重新生成一下列表页面，刷新列表页试试，当前栏目的栏目图片也出来了呢

6.3K4 0

dedecms提取某栏目及子栏目名称到首页怎么弄

我们建网站时有不同的需求，例如为页面创建一个栏目导航，用dedecms如何提取某栏目及子栏目名称和链接呢？如下图所示，先列出指定的顶级栏目，在下方再列出此栏目的所有子栏目。　　...之前ytkah说过dedecms调用当前栏目的子栏目怎么操作，我们可不可以发散一下思维进行扩展呢？　　...:type} 　　再列出近视栏目的所有子栏目，其实只是添加一个typeid调用 {dede:channel typeid='8' type='son' row='12'} 当前栏目的名称　　2、{dede:channel type='son' row='5'} [field:typename...='top'}[field:typename/] {/dede:channel}调用子栏目的当前顶级栏目名称

7.6K4 0

为dedecms文章列表页标题增加序号,第二页开始才显示第x页

想必大伙建站都会写文章，随着时间的推移，你的智慧结晶会越来越多，一般的建站程序早帮你想好了，把这些文章做成一个列表，比如dedecms栏目列表，便于观众浏览，但有个问题就是dedecms文章列表页标题没有序号...那么，怎么为dedecms文章列表页标题增加序号呢？织梦cms有一个文章列表函数:dede:pagelist，但这个函数可能没有具体运用到模板标题中，so，我们来just do it。　　...listitem='pageno' function='html2text(@me)'/}页 - {dede:global.cfg_webname/} 　　但是这样还是不够完善，列表第一页还是会重复，比如/js.../gdjs/和/js/gdjs/list_73_1.html内容是一样的，却出现了两个url，造成重复内容。...参考自“DedeCms栏目列表标题第x页序号的完美修改方法”，请自行搜索。　　既然要做，就做得彻底些,把描述标签(description)也完善一下吧。

2.9K1 0

DEDECMS织梦更改选择副栏目选择数量的方法

在dedecmd系统里面，对一篇文章的副栏目选择作了最大数量为9 的限制，即，一篇文档最多只能同时属于9个副栏目和一个主栏目，以下几步轻松解决这个问题。...修改方法如下，打开织梦的根目录文件夹，找到 dede文件夹下面的js文件夹，里面找到main.js这个文件，用notepad+等修改工具打开。...数据库副栏目字段（typeid2）长度默认设置为90字节，如果超过90字节(一个字符占一个字节，包括里面的英文逗号)，则将会出现只保存前90个字节的数据，更改你的数据库dede_archives表的typeid2...注意：更改完后，如果仍没有变化，是系统缓存导致，清除系统缓存或更换另一浏览器登陆后台即可后台目录如已变更为 xxx，则更改的文件位置为/xxx/js/main.js。...以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持原文链接：https://www.mimisucai.com/teach/dedecms/202236285.html

6K3 0

dedecms 添加并调用栏目缩略图

网上有很多关于 dedecms 添加栏目缩略图的方法，大家都是复制粘贴，无一能用，经过本人测试总结出一套完整的方案，希望对朋友们有所帮助。...class="coolbg np" style="width:60px" onClick="SelectTemplets('SelectImage('form1.typeimg','small');" />(栏目模板里用...修改好以上代码后，在 head 区域引入 main.js 文件 js/main.js"> ?..."class="coolbg np" style="width:60px" onClick="SelectImage('form1.typeimg','small');" />(栏目模板里用{dede:...同样引入 main.js 文件，操作同上 ---------------------------------------------------------------------------- 打开：

9.8K2 0

织梦DEDECMS仿站模板必备标签 - list_article.htm列表模板

前面老蒋有整理到dedecms织梦程序首页模板常用的调用标签，在这里我们继续列表模板使用的标签。一般我们列表模板用于栏目所有文章或者子栏目的列表中使用的。...{dede:field.typeid function=gettoptype(@me,typename)/} 4、当前栏目名称 {dede:field.typename/} 5、当前栏目内容 {dede...:field.content/} 6、当前位置 {dede:field.position/} 7、当前栏目连接 {dede:type}[field:typeurl/]{/dede:type} 8、栏目文档列表...10、搜索标题结果 {dede:global.keyword function=RemoveXSS(@me)/} 总结，以上是织梦dedecms仿站时候列表页面常用的模板标签。...本文出处：老蒋部落 » 织梦DEDECMS仿站模板必备标签 - list_article.htm列表模板 | 欢迎分享

12.3K3 0

DEDECMS仿站常用模板标签记录 DEDECMS主题模板必备

这不有在需要用到DEDECMS搭建一个医院类网站，如果使用WORDPRESS并不是最优选择，准备使用DEDECMS进行仿站布局。...其实仿站并不难，只需要将静态页面干净处理之后，然后在对应位置调用当前程序的标签就可以。在这里老蒋先整理DEDECMS程序的标签，以前这款程序是经常使用的，如今已经好几年没有使用，有点遗忘。...{dede:field name='position'/} 6、调用栏目子栏目 {dede:channel type='sun' typeid='栏目ID'} <a href="[field:typelink...、版权标签调用 {dede:global name='cfg_powerby'/} 8、列表页常用标签列表文章调用标签：{dede:list pagesize='8'} {/dede:list} 当前栏目名称标签...本文出处：老蒋部落 » DEDECMS仿站常用模板标签记录 DEDECMS主题模板必备 | 欢迎分享

24.8K3 0

10个常用的eyoucms易优CMS标签（织梦CMS迁移可用）

getall='0' row='100'} {$field.tag}（文档数：{$field.total}） {/eyou:tag} 这个和我们看到的DEDECMS...基础参数： aid='' 文档ID，在内容页可以不设置该属性 typeid='' 栏目ID，调取某个栏目下的全部TAG row='100' 返回广告列表总数 getall='' 获取类型，0为当前内容页...' 表示当前下级栏目以及同级栏目 type='first' 表示当前栏目ID的最顶级栏目下的第一级全部栏目 sort='' 标签排序方式 sort='new' 按最新排序 sort='...{eyou:position/} 6、封面页当前栏目的名称 {$eyou.field.typename} 7、分页数据调用以及分页样式 {eyou:listpagesize="1"titlelen="...、image引入标签 {eyou:staticfile="skin/css/style.css"/} {eyou:staticfile="skin/js/jquery.min.js"/} {eyou:globalname

3.1K1 0

怎样实现给DEDE的栏目增加栏目图片(1)

http://www.genban.org/news/dedecms-7577.html 前两天用DEDE做二次开发的时候，遇到一个问题，领导让给每个栏目增加一个栏目图片的功能，网上找了些东西...首先，给栏目分类表`dede_arctype`表增加缩略图字段`typeimg`，用phpMyAdmin或其他数据库管理工具，直接在数据表中添加该字段，或者运行下面的SQL语句： alter table...dede/templets/catalog_add.htm dede/templets/catalog_edit.htm 2.1 打开dede/templets/catalog_add.htm，查找栏目名称...：在其下面加上如下代码：栏目图片：并在之间引入如下js： 2.2 打开dede/catalog_add.php页面，保存上传栏目图片的内容，查找 $queryTemplate = "INSERT...2.3 打开dede/templets/catalog_edit.htm页面，查找栏目名称：发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/114127.html

1.8K1 0

百度编辑器 UEditor 用 highlight.js 库实现代码高亮

写个页面测试下先：（其中 monokai-sublime.css，是 sublime 编辑器的一种常用样式，styles 文件夹有很多不同的样式库，可以多换换，挑个自己喜欢的用）代码高亮...highlight_demo.zip 此时还没有完， highlight.js 代码高亮遵循的格式是：**，而百度编辑器的代码语言模式生成的为 $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); //高亮代码...--这个是官方 demo 的用法，也可以用我博客上的 js，增加了个复制成功的提示，交互更好些。

2K2 0

整理的dedecms标签大全,方便查找

平时用dedecms开发经常会用到一些标签，特别是首页、栏目页、内容页，这些页面都会用到标签的调用，比如title、keywords、description、arclist、field.body等，...为了方便查找，ytkah特地整理了dedecms标签，大家可以用ctrl+F实现搜索。...dedecms首页标签网站名称：{dede:global.cfg_webname/} 网站根网址：{dede:global.cfg_basehost/} 网站根目录：{dede:global.cfg_cmsurl...field.title/} 文章描述：{dede:field.description function='html2text(@me)'/} 文章关键词：{dede:field.keywords/} 当前位置...ID,在列表模板和档案模板中一般不需要指定，在首页模板中允许用","分开表示多个栏目； getall='1' 在没有指定这属性的情况下,在栏目页、文章页模板,不会获取以","分开的多个栏目的下级子类 titlelen

8.8K5 0

【说站】织梦DEDECMS发布文章后自动更新栏目页、首页、上下篇

经常使用织梦DEDECMS的朋友会发现，每次发不完新文章了之后，还需要手动的生成文章页、栏目页和主页，有时还会忘记去生成，忘了的话发布好的文章就显示不了这就很尴尬了，所以今天品自行教大家织梦DEDECMS...发布文章后自动更新栏目页、首页、上下篇。...其实这个功能是织梦内容管理系统自带的，只是很多小伙伴们不知道，发布文章后可以自动更新首页、栏目页、自动更新上下页这个功能的，但是默认没有开启，我们只需要在后台设置一下就可以了。登录织梦后台。...发布文章后马上更新网站主页：是发表文章后马上更新相关栏目：是发表文章后马上更新上下篇：是设置完成以后，我们每次用织梦DEDECMS发布新文章以后就会自动生成内容页、栏目页、上下篇和主页。

6.2K2 0

杨校老师课堂之DeDeCMS建站_程序安装

，DeDeCMS免费版的主要目标，用户多为个人站长，功能更专注于个人网站或中小型门户网站的构建，当然也不乏有企业用户和学校等在使用本系统。...---- 2.1 下载DeDeCMS源码 2.1.1 访问DeDeCMS官方网站,点击此处过去 2.1.2下载DeDeCMS 5.7 sp2 ?...在数据库栏目中，点击创建数据库 ? 填写数据库信息 ? 填写在DeDeCMS的安装系统中 ? 安装完成后效果 ? 到此完成了安装。进入后台: ?.../assets/js/jquery.min.js'); //define('MDA_REG_URL', MDA_APIHOST.'.../api_v1/dedecms/bind_user'); //define('MDA_API_LOGIN', MDA_APIHOST.'

3.7K1 0

给你八分钟搞定dedeCMS(织梦内容管理系统)

更多信息：织梦内容管理系统织梦_百科第2分钟_dedeCMS安装操作系统：Windows 7 下载和安装php运行环境：WAMP5 下载dedeCMS ：http://www.dedecms.com...最初看这个界面的时候，很陌生，只是知道界面有很多功能，但是不是很清楚他们干啥用的... 我是用dedeCMS来做一个官网,所以用的的功能不是很多....(这里我特别强调，原因是我很喜欢这里的这个思想...把导航中所有的内容都可以用文章的形式来表示出来) 这里是工作的第一步，至少我是这么认为的.....第5分钟_系统在系统这一栏目中，我们需要的是设置一些我们的系统变量，在这里设置好了系统变量了以后，方便我们在之后的开发过程中灵活的调用这些变量第6分钟_模板在dedeCMS中，最灵活的应该就是系统提供的模版...更多模版标签：http://help.dedecms.com/v53/archives/tag/ 第7分钟_生成在上一分钟中，我们写好了我们自己的模版后，我们需要使用这些模版，我们可以在导航栏目中调用这些模版

6.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭