分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress添加列表模式
  • +
  • 5
  • 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 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

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