<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>任务列表</title>
<link rel="stylesheet" href="css/taskStyle.css">
<script src="js/jquery-3.6.1.min.js"></script>
<script>
// 业务代码
$(function(){
//点击切换到成长任务
$("#nav li:last").on("click",fun1=function(){
$(" .taskContent #dayTask").hide();
$(" .taskContent #growTask").show();
$(" .taskContent").css('background-color','#ff9400')
})
//点击切换到日常任务
$("#nav li:first").on("click",fun2=function(){
$(" .taskContent #dayTask").show();
$(" .taskContent #growTask").hide();
$(" .taskContent").css('background-color','#26a6e3')
})
//解除绑定
$("#del").click(function(){
$("#nav li:first").off();
})
//恢复绑定
$("#del1").click(function(){
$("#nav li:first").on("click",function(){
fun2();
});
$("#nav li:last").on("click",function(){
fun1();
})
})
})
</script>
</head>
<body>
<section id="taskList">
<ul id="nav">
<li>日常任务</li>
<li>成长任务</li>
</ul>
<div class="taskContent">
<ul id="dayTask">
<li>
<div>
<h1>交口称赞</h1>
<p>为喜欢的回答送出一个赞</p>
<p>奖励：<span>财富值×10</span><span>经验之石（小）×1</span></p>
</div>
<div><input type="button" value="前往"></div>
</li>
<li>
<div>
<h1>每日答题</h1>
<p>前往回答一个问题</p>
<p>奖励：<span>铜宝箱×1</span><span>财富值×10</span><span>经验之石（小）×1</span></p>
</div>
<div><input type="button" value="前往"></div>
</li>
<li>
<div>
<h1>助人为乐</h1>
<p>当日获得1个采纳</p>
<p>奖励：<span>铜宝箱×1</span><span>财富值×10</span></p>
</div>
<div><input type="button" value="前往"></div>
</li>
</ul>
<ul id="growTask">
<li>
<div>
<h1>成长之路</h1>
<p>知道等级达到2级</p>
<p>奖励：<span>财富值×20</span><span>铜宝箱×1</span><span>准备入学微章×1</span></p>
</div>
<div><input type="button" value="前往"></div>
</li>
<li>
<div>
<h1>知识之路</h1>
<p>在知道获得1个采纳</p>
<p>奖励：<span>铜宝箱×1</span><span>财富值×20</span><span>经验之石（小）×1</span></p>
</div>
<div><input type="button" value="前往"></div>
</li>
<li>
<div>
</div>
<div>
<input type="button" id="del1" value="恢复绑定">
<input type="button" id="del" value="解除绑定">
</div>
</li>
</ul>
</div>
</section>
</body>
</html>
评论0