菜鸟编程指南：如何实现DNN站点自定义按钮点击跳转功能？

你原有代码无法跳转的核心原因是DNN平台页面默认自带全局form容器，你额外嵌套的form标签会和全局容器冲突，导致onclick跳转事件被拦截，同时部分DNN版本会限制内嵌原生onclick事件的执行，规避安全风险。

推荐改用<a>标签实现按钮，无需依赖JS和form标签，兼容性更强，同时预留了可快速修改的参数位：

可直接复用的代码 #

1. CSS样式代码 #

/* 这里的4个变量是快速修改按钮样式的入口，直接修改对应色值即可 */
:root {
  --btn-bg: #4c9ed9; /* 按钮默认背景色 */
  --btn-text: #ffffff; /* 按钮默认文字色 */
  --btn-hover-bg: #ffffff; /* 按钮hover时背景色 */
  --btn-hover-text: #4c9ed9; /* 按钮hover时文字色 */
}

.custom-btn {
  display: inline-block;
  background-color: var(--btn-bg);
  color: var(--btn-text);
  padding: 20px 40px;
  border: 1px solid #111;
  text-decoration: none;
  cursor: pointer;
}

.custom-btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  border: 1px solid #111;
}

2. HTML代码 #

<!-- 替换href内的链接为你的跳转地址，标签中间的文字为按钮显示文本即可 -->
<a href="替换为你的目标跳转地址" class="custom-btn">替换为按钮显示文本</a>

使用说明 #

• 把CSS代码放到DNN站点的全局样式表或者对应页面的自定义样式区块里
• HTML代码可以插入到任意你需要放按钮的内容区块，需要调整时只需要修改开头的CSS变量、跳转链接、按钮文本三个位置即可，不需要修改其他代码

内容的提问来源于stack exchange，提问作者Moira K