下面教大家如何使用jq在用户中心侧边栏添加这个扩展中心
![图片[1]-子比主题美化 – 子比主题用户中心添加扩展链接入口-Baili Blog](https://cdn.bailir.top/wp-content/uploads/img/2026/05/image-290.png)
教程
首先需要编写好你需要插入的html模板,下面我给大家一个插入示例:
代码解析如下:
$(function(){ ... });:这是一个 jQuery 的文档就绪函数,意味着当 HTML 文档完全加载和解析完成后,里面的函数就会被执行。$('.col-sm-3 .sidebar-user').prepend('<div class="zib-widget padding-6">... </div>');:这一行使用 jQuery 的prepend方法在具有.col-sm-3 .sidebar-user类的元素内部的最开始处添加一段 HTML 代码。- 在添加的 HTML 代码中,有几个
<a>标签,每个都包含一个图标和一段描述性的文本。这些链接被添加到一个名为.zib-widget的 div 中,添加zib-widget的目的是调用子比主题小工具的css
值得一提的是,在很久之前我所发布的头像框代码教程也是使用这种方式在头像之前添加一个头像框进行覆盖
也就是说只要你能够准确的表明需要插入内容的css,这段代码就能够将你所编写的html插入其中
代码内的prepend也是支持更改的,prepend的含义是在选中的div内部插入
你也可以修改为after、before、hover等
其中after为在区块后面插入
而before则是在区块前面插入
hover这个更是老演员了,悬浮时显示
大家可以参考我的代码自行修改内容,不过html代码需要压缩后才能够放在里面。
© 版权声明
本站收集的资源仅供内部学习研究软件设计思想和原理使用,学习研究后请自觉删除,请勿传播,因未及时删除所造成的任何后果责任自负。
如果用于其他用途,请购买正版支持作者,谢谢!若您认为「Baili Blog」发布的内容若侵犯到您的权益,请联系站长邮箱:b71239135@gmail.com 进行删除处理。
本站资源大多存储在云盘,如发现链接失效,请联系我们,我们会第一时间更新。THE END











请登录后查看评论内容