您现在的位置是:首页 > 网站制作 > WordpressWordpress
WordPress文章页实现所属分类高亮显示
杰帅2023-07-20【Wordpress】人已围观
简介如何在Wordpress文章页实现所属分类高亮显示呢?当用户点击某篇文章,文章所属分类自动添加一个样式高亮显示。效果如下图:
如何在Wordpress文章页实现所属分类高亮显示呢?当用户点击某篇文章,文章所属分类自动添加一个样式高亮显示。效果如下图:
第一步:获取文章所属于分类,这个可以隐藏。
<div id="fltop" style="display:none;">
<?php the_category(', ') ?>
</div>
第二步:给顶级分类的二级分类列表添加一个ID;(方法见:文章页获取顶部父类下所有子分类列表)
<ul id="sidebarleft">
……
</ul>
第三步:使用JS获取所属分类的A标签URL和列表所有A标签的URL,并且进行对比判断,如果包含就给A标签添加一个class类:current-cat;
<script>
//获取分类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样式,这样就实现了点击后高度显示效果。
Tags:WordPress建站 分类 高亮
很赞哦! ()
相关文章
随机图文
-
WordPress 页面模板(Page Template)下拉列表不显示的原因及解决方法
WordPress 的自定义页面模板是一个非常强大好用的功能,使用它新建一些静态页面(Page),添加上一些数据调用的函数,再在网页上做一个导航连接到对应的页面就可以实现很多自定义的功 -
wp_reset_postdata 和 wp_reset_query 的作用与区别
什么时候使用wp_reset_query,什么时候用wp_reset_postdata? -
wordpress发布文章HTML标签被自动过滤掉该如何处理?
wordpress发布文章时很多html标签都会自动过滤掉,造成了文章中无法添加<style></style><script></script>等标签。那么该如何如何处理呢? 解决方法一: 将wp-includes文件夹下 -
wordpress 上传的图片不显示的问题 base64,data:image/gif
文章评论
本站推荐
标签云
猜你喜欢
- The7主题11.7.2完美汉化中文版|强大多功能自定义设计WordPress企业主题包含模板 - 搬主题
- WordPress新手必看的SEO优化技巧(五):数据库优化篇
- WordPress函数get_bloginfo
- wordpress使用pre标签来显示你的HTML
- 2023谷歌SEO入门指南:Google SEO优化怎么做?
- WordPress函数wp register sidebar widget添加自定义小工具(widget)
- WordPress秒收方法设置
- 优化百度统计代码加载 让WordPress网站打开更快 - 搬主题
- WordPress函数single_month_title()
- WordPress Ping(更新服务)地址列表