搬码资源网广告位搬码资源网广告位

WordPress文章页面实现所属分类高亮显示

上面是搬码源码网 abnma.com 经由过程收集网络收拾整顿的代码片断。搬码源码网小编此刻分享给各人,也给各人做个参考。

怎样在 wordpress 文章页完成所属分类高亮显示呢?当用户点击某篇文章,文章所属分类主动添加一个样式高亮显示。

第一步:获取文章所属于分类,这个可以隐蔽

<div id="fltop" display:none;">

<?php the_category(',') ?>

</div>

第二步:给顶级分类的二级分类列表添加一个 ID;(要领见:文章页获取顶部父类下一切子分类列表)

<ul id="sidebarleft">

……

</ul>

第三步:应用 JS 获取所属分类的 A 标签 URL 和列表一切 A 标签的 URL,而且举行比照判定,假如包罗就给 A 标签添加一个 class 类:current-cat;

<script>

//代码来历:学做网站论坛 https://www.xuewangzhan.net/

//获取分类A标签和列表一切的a标签(返归节点对象)

var myNav = document.getElementById("sidebarleft").getElementsByTagName("a");

var myURL = document.getElementById("fltop").getElementsByTagName("a");

//轮回div上面一切的链接,

for(var i=0;i<myNav.length;i++){

//获取每一个a标签的herf属性

var links = myNav[i].getAttribute("href");

var myURL2 = myURL[0].getAttribute("href");

//查望div下的链接是否包罗以后窗口,假如存在,则给其添加样式

if(myURL2.indexOf(links) != -1){

myNav[i].className="current-cat";

}

}

</script>

第四步:在 CSS 中添加一个 current-cat 样式,如许就完成了点击后高度显示后果。

以上是搬码源码网(abnma.com)为你网络收拾整顿的全数代码内容,但愿文章可以或许帮你解决所碰到的步伐开提问题。假如感觉搬码源码网网站内容还不错,接待将搬码源码网网站保举给步伐员挚友。

总结

以上是搬码源码网为你网络收拾整顿的WordPress文章页面完成所属分类高亮显示全数内容,但愿文章可以或许帮你解决WordPress文章页面完成所属分类高亮显示所碰到的步伐开提问题。

假如感觉搬码源码网网站内容还不错,接待将搬码源码网网站保举给步伐员挚友。

0
分享到:
搬码资源网广告位

评论0

请先

为了配合净网行动 , 本站下架所有娱乐源码 , 如有疑问 , 请联系站长qq 43233524
没有账号? 忘记密码?