分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress添加列表模式
+

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留言数据到搜狐畅言

      前段时间才说了,多说因为不知道什么原因已经决定关闭了,那么我们需要做的事情就是导出数据了,但是我有理由相信,习惯多说的用户可能不会习惯Wor...

      点击查看
    • WordPress文章内容主体后添加广告位

      WordPress文章内容主体后添加广告位

      现在做站全凭兴趣的已经很少了,一个站点到了最后肯定是希望盈利来维持服务器的发展,但是有些站长可能对于代码根本不熟悉,那么这里就提供一种非常简...

      点击查看
    • 帅气小琦琦
    • 楚书业
    WordPress添加列表模式
    7 + 9 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)
    1. 1楼
      楚书业
      介个可以学学,蛮好用的!
      楚书业 1年前 (2016-03-26)回复