文章目录
需要达到的前端效果预览：
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="{% static "antapp/bootstrap/bootstrap.min.css" %}">
<title>Document</title>
</head>
<body>
<div class="row" style="margin-top: 20px;margin-left: 40px;">
<button type="button" id="chinese" class="btn btn-primary" style="margin-left: 5px;">语文</button>
<button type="button" id="math" class="btn btn-warning" style="margin-left: 5px;">数学</button>
<button type="button" id="english" class="btn btn-success" style="margin-left: 5px;">英语</button>
<button type="button" id="show" class="btn btn-danger" style="margin-left: 5px;">显示</button>
<button type="button" id="hide" class="btn btn-secondary" style="margin-left: 5px;">隐藏</button>
</div>
<div class="row" style="margin-top: 20px; margin-left: 40px;">
<div id="showtxt" class="alert alert-primary" role="alert"> A simple primary alert—check it out!
</div>
</div>
<script src="{% static "antapp/bootstrap/jquery.min.js" %}"></script>
<script src="{% static "antapp/bootstrap/bootstrap.bundle.min.js" %}"></script>
<script>
var btconfig={
"chinese":"语文成绩100",
"math":"数学成绩99",
"english":"英语成绩98",
}
$(function(){
$("#chinese").click(function(){
alert(btconfig["chinese"])
$("#showtxt").html(btconfig["chinese"])
})
$("#math").click(function(){
$("#showtxt").html(btconfig["math"])
})
$("#english").click(function(){
$("#showtxt").html(btconfig["english"])
})
$("#show").click(function(){
$("#showtxt").show()
})
$("#hide").click(function(){
$("#showtxt").hide()
})
})
</script>
</body>
</html>
实现步骤
复制bootstrp代码（buttons）
<button type="button" id="chinese" class="btn btn-primary" style="margin-left: 5px;">语文</button>
<button type="button" id="math" class="btn btn-warning" style="margin-left: 5px;">数学</button>
<button type="button" id="english" class="btn btn-success" style="margin-left: 5px;">英语</button>
<button type="button" id="show" class="btn btn-danger" style="margin-left: 5px;">显示</button>
<button type="button" id="hide" class="btn btn-secondary" style="margin-left: 5px;">隐藏</button>
上图使用的工具链接如下：
https://blog.csdn.net/xzzteach/article/details/140732891
复制bootstrp代码（Alert警告框）
https://v4.bootcss.com/docs/components/alerts/
<div id="showtxt" class="alert alert-primary" role="alert"> A simple primary alert—check it out!</div>
写js
<script>
var btconfig={
"chinese":"语文成绩100",
"math":"数学成绩99",
"english":"英语成绩98",
}
$(function(){
$("#chinese").click(function(){
alert(btconfig["chinese"])
$("#showtxt").html(btconfig["chinese"])
})
$("#math").click(function(){
$("#showtxt").html(btconfig["math"])
})
$("#english").click(function(){
$("#showtxt").html(btconfig["english"])
})
$("#show").click(function(){
$("#showtxt").show()
})
$("#hide").click(function(){
$("#showtxt").hide()
})
})
</script>
测试效果
