标签：以侧边栏标题增加More+更多内容跳转链接为例¶

原文链接: https://www.itylq.com/jquery-script-for-div-modification.html

发布日期: 2023-10-31 迁移时间: 2026-03-21

最近调整了下主页侧边栏，给“音乐播放器”、“标签云”和“友情链接”栏增加了“More+”更多内容的跳转快捷链接，本文简要记录下实现过程。

1 需求¶

因为后台 Widget 各个小栏目的标题和内容都是用同一模板函数实现的，如果直接在模板函数上添加“More+”标签链接，会有两个问题，一是所有侧边栏小栏目都会有“More+”小尾巴，二是无法给不同小栏目的“More+”配置不同的跳转链接。

2 解决思路¶

给不同小栏目设置 ID，通过 jquery 脚本抓取特定 ID 名称的

标签，获取

子节点下的内容，然后改写内容，增加一个标签用来实现靠右对齐的“More+”快捷链接。

3 实现步骤¶

1、后台修改“音乐播放器”子栏目类名，通过截断的方式给对应

标签巧妙的添加 ID： //默认只能设置

标签的 class 类名，可以通过 localmusic” id=”localmusic 进行构造

2、编写 jquery 代码，通过 ID 获取音乐播放器子栏目父

的内容，在获取的内容后增加标签内容，标签内嵌标签，用于设置跳转链接：

$(function(){
//增加span前
//console.log($('#localmusic').children("div").eq(0).html());    //调试用
var divtemp = $('#localmusic').children("div").eq(0).html();
$('#localmusic').children("div").eq(0).html(
divtemp +
"<span style='float:right;font-size:12px'><a href='/MusicLibrary/index.php' style='color:#1c60f3' target='_blank' title='更多音乐...'>More+</a></span>"
);
//增加span后
//console.log($('#localmusic').children("div").eq(0).html());    //调试用
})

3、本地测试无误后，添加到现有主题 js 文件中： //或者为了方便管理，单独建立一个 js 文件(比如本站的 append.min.js)专门用于边边角角的优化。

4、验证： 清除浏览器缓存，刷新网站首页，发现侧边栏音乐播放器标题右侧已增加了“More+”更多跳转链接，点击该链接，跳转到的链接正确无误。

本文由WordPress迁移至MkDocs