做校園二手交易網(wǎng)站的目的疫情最新消息
文章目錄
- 需要達(dá)到的前端效果預(yù)覽：
- 實(shí)現(xiàn)步驟
- 復(fù)制bootstrp代碼（buttons）
- 復(fù)制bootstrp代碼（Alert警告框）
- 寫js
- 測試效果
需要達(dá)到的前端效果預(yù)覽：
{% 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;">數(shù)學(xué)</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":"數(shù)學(xué)成績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>
實(shí)現(xiàn)步驟
復(fù)制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;">數(shù)學(xué)</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
復(fù)制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":"數(shù)學(xué)成績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>
測試效果
