效果图
代码:
- 找到主题文件夹下friends.php
- 从 开始位置选中到 <?php $this->need(‘public/article.php’); ?>
- 然后复制下面的代码覆盖
{hide}
{mtitle title=” HTML “/}
<div id="Joe">
<?php $this->need('public/header.php'); ?>
<div class="joe_container">
<div class="joe_main">
<div class="joe_detail" data-cid="<?php echo $this->cid ?>">
<?php $this->need('public/batten.php'); ?>
<div class="form-container">
<form id="conditionsForm">
<h2 class="center-text">请勾选你符合的条件:</h2>
<label>
<input type="checkbox" name="condition[]" value="added_friend_link">
<span>我已添加 故渊渡 博客的友情链接</span>
</label>
<label>
<input type="checkbox" name="condition[]" value="personal_blog">
<span>我的链接主体为 个人,网站类型为博客</span>
</label>
<label>
<input type="checkbox" name="condition[]" value="accessible_in_cn">
<span>我的网站现在可以在中国大陆区域正常访问</span>
</label>
<label>
<input type="checkbox" name="condition[]" value="accessible_fl">
<span>我接受并同意本站相关规则及政策</span>
</label>
<label>
<input type="checkbox" name="condition[]" value="compliant_laws">
<span>网站内容符合中国大陆法律法规</span>
</label>
<p id="instructions" class="hidden">勾选后展示评论区发送申请</p>
</form>
</div>
<?php $this->need('public/article.php'); ?>
{mtitle title=” CSS “/}
<style>
/* BLOG.HEYLIE.CN基础样式 */
body {
position: relative;
min-height: 100%;
background: var(--heo-background);
color: var(--heo-fontcolor);
font-size: 16px;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
line-height: 2;
-webkit-tap-highlight-color: transparent;
margin: 0
}
.form-container {
max-width: 800px;
margin: auto;
}
.center-text {
text-align: center;
}
#conditionsForm {
margin-bottom: 20px;
font-size: 16px;
border: 1px solid #ccc;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
}
#conditionsForm label {
display: block;
margin-top: 10px;
cursor: pointer;
}
#conditionsForm input[type="checkbox"] {
margin-right: 8px;
vertical-align: middle;
}
#conditionsForm input[type="checkbox"]:checked+span {
color: green;
font-weight: bold;
}
#conditionsForm label:hover {
background-color: #e0e0e0;
padding-left: 5px;
}
#instructions {
text-align: center;
opacity: 0.5;
/* 默认透明度为0.5 */
transition: opacity 0.3s ease-in-out;
}
.hidden {
opacity: 0;
pointer-events: none;
/* 阻止鼠标事件 */
}
</style>
{mtitle title=” JavaScript “/}
<script>
// 监听所有复选框的变化
document.querySelectorAll('#conditionsForm input[type="checkbox"]').forEach(function (checkbox) {
checkbox.addEventListener('change', checkConditions);
});
function checkConditions() {
// 获取所有的条件复选框
var conditions = document.getElementsByName('condition[]');
var allChecked = true;
// 检查是否有未选中的复选框
for (var i = 0; i < conditions.length; i++) {
if (!conditions[i].checked) {
allChecked = false;
break;
}
}
// 根据复选框的状态显示或隐藏评论区
var commentsSection = document.getElementById('comments');
commentsSection.style.display = allChecked ? 'block' : 'none';
}
</script>
{/hide}
THE END
请登录后发表评论
注册
社交账号登录