分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress添加列表模式
+ 3

WordPress添加列表模式

  • 实现原理
  • 相关代码
  • 总结说明
  • WordPress添加列表模式-BanYuner

    这个功能最开始是在爱博说上面看到的,我觉得很好用就决定将这个功能弄到自己的站点上面来,但是弄了一天之后还是没有成果,但是经过我不懈努力,加上群友的帮助,最终实现了这个功能,可能对于高手来说的话,这个功能小菜一碟,但是我觉得都是一个学习的过程,只有不断学习不断折腾,才能学习到更多知识。

    实现原理

    废话不多说,那么我就开始说了。简单的说,这个功能就是通过点击事件来改变CSS,那么一般都是通过JS来实现的。点击一个变换到另外一个,改变CSS,这个就是思路。

    相关代码

    代码方面我们需要用到的就是JS代码了:

    JS代码

    <script>
    $(document).ready(function(){
    $("#lb").click(function(){ //定义代码的id,如果这里要修改,下面的调用代码也要对应修改
    $(".excerpt .focus").addClass("displaynone");  //对应的类名添加额外类,类为.excerpt .focus,添加的CSS类名为displaynone
    $(".excerpt .note").addClass("displaynone");  //同上
    $(".ratings").addClass("displaynone");  //同上
    $(".excerpt").css("padding","10px 10px 10px 25px");  //修改类名为excerpt的padding属性
    $("#zy").show();  //显示id为zy的标签
    $("#lb").hide();  //隐藏id为lb的标签
    });
    });
    $(document).ready(function(){
    $("#zy").click(function(){
    $(".excerpt .focus").removeClass("displaynone");  //对应的类名添加额外类,类为.excerpt .focus,添加的CSS类名为displaynone
    $(".excerpt .note").removeClass("displaynone");  //同上
    $(".ratings").removeClass("displaynone");  //同上
    $(".excerpt").css("padding","20px 20px 20px 255px");  //修改类名为excerpt的padding属性
    $("#lb").show();  //显示id为lb的标签
    $("#zy").hide();  //隐藏id为zy的标签
    });
    });
    </script>
    

    调用代码

    <span class="list"><span id="lb"><i class="fa fa-list"></i> 列表模式</span><span id="zy"><i class="fa fa-list"></i> 摘要模式</span></span>
    

    CSS代码

    .displaynone
    {
    display:none;
    }
    #zy{
    display:none;
    }
    

    总结说明

    上面每行代码对应的含义我已经在后面附上相关含义了,大家可以参考一下,其中的变量或者类名如果要修改的话,请统一修改,避免代码失效。如果代码点击无效果,那么请考虑引入jquery。

    如果你在实现过程中出现了问题,可以直接留言询问,我将尽力帮助你实现这个功能。

    如果你对代码有不明白的地方,可以考虑参考:
    http://www.w3school.com.cn/tiy/t.asp?f=jquery_css_setcolor
    http://www.w3school.com.cn/tiy/t.asp?f=jquery_dom_addclass
    http://www.w3school.com.cn/tiy/t.asp?f=jquery_dom_removeclass

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    WordPress添加列表模式

    支付宝(点击图片切换)

    扫码,支持我

    WordPress添加列表模式

    微信(点击图片切换)

    扫码,手机看

    WordPress添加列表模式
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress基础教程-文章内容中如何添加音频文件

      WordPress基础教程-文章内容中如何添加音频文件

      目前基础教程已经基本完毕了,每篇文章都是用自己的语言写出来的,有兴趣查看其他教程的用户可以前往这里查看所有相关教程:教程合集 添加音频文件还...

      点击查看
    • WordPress评论上方显示评论用户列表

      WordPress评论上方显示评论用户列表

      一段时间之前,我在我的博客里面添加了下面的功能,这个功能我一开始觉得貌似没有人会喜欢或者说会显得比较多余,但是今天一个朋友问我如何实现这个功...

      点击查看
    • WordPress自动截取文章首段限定字数做为摘要

      WordPress自动截取文章首段限定字数做为摘要

      今天一个朋友问我这个问题,说实话,我也不像百度了,所以直接把 DUX 的方法介绍给大家了,我个人还是比较看好这个方法的。 DUX 实现这个功...

      点击查看
    WordPress添加列表模式
    6 + 9 =
    1. 1楼
      楚书业
      最后评论时间:2016/10/01 10:16
      来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动
      介个可以学学,蛮好用的!
      楚书业 8个月前 (10-01)回复