我正在使用 HTML、CSS、Javascript 和 Python (Flask) 创建一个简单的网络应用。
在页面中间，有一个小部件，由左侧部分组成，有五个按钮，右侧部分有五个“卡片”，但只有一个是可见的。
如果我点击一个按钮，相应的卡片就会出现，我点击的按钮的颜色也会改变。
问题是有一些 css 属性没有保留，比如边框，在第一次更换卡片后，它消失了，而且 hover 属性也不再起作用。这是我的代码。
function change(c){
let btn0 = document.getElementById("bmi");
let btn1 = document.getElementById("ideal");
let btn2 = document.getElementById("calories");
let btn3 = document.getElementById("water");
let btn4 = document.getElementById("fat");
let btnA = [btn0, btn1, btn2, btn3, btn4];
let card0 = document.getElementById("b");
let card1 = document.getElementById("i");
let card2 = document.getElementById("c");
let card3 = document.getElementById("w");
let card4 = document.getElementById("f");
let cardA = [card0, card1, card2, card3, card4];
for(let i=0; i<5; i++){
if (i==c){
btnA[i].style.backgroundColor = "#f00";
cardA[i].style.display = "inline";
}else{
btnA[i].style.backgroundColor = "#ddd";
cardA[i].style.display = "none";
}
cardA[i].style.backgroundColor = "#f00";
}
}.title{
font-family: 'Merriweather', serif;
text-align: center;
color: red;
margin-top: 20px;
font-size: 40pt;
font-weight: 3000;
}
.infoBar{
width:50%;
margin: auto;
}
.topMenu{
font-family: 'Merriweather', serif;
font-size: 18pt;
height: 50px;
width: 32%;
margin: -3px;
background-color: blue;
border-left:1px white solid;
border-right:1px white solid;
border-radius: 50px;
}
.startingContent{
text-align: center;
margin-top: 30px;
font-family: 'Merriweather', serif;
font-size: 20pt;
font-weight: 200;
}
.image{
margin: auto;
height:30%;
width:30%;
margin-top: 30px;
}
.widget{
display:flex;
margin: auto;
}
.buttons{
display: flex;
flex-direction: column;
}
.lateral{
height: 75px;
width: 85px;
padding: 5px;
border-radius: 0px;
border: 1px #ddd solid;
background-color: #ddd;
margin: 0px;
border-top-right-radius: 15px 15px;
border-bottom-left-radius: 15px 15px;
}
#bmi{
background-color: #f00;
}
.lateral:hover{
background-color: #fff;
transition: 1s;
border: #fff solid 1px;
}
.ideal,.calories, .water, .fat, .bmi{
width:70%;
border: 1px solid blue;
margin-top: -20px;
border-top-right-radius: 30px 30px;
border-bottom-left-radius: 30px 30px;
}
.ideal,.calories, .water, .fat{
display: none;
}
table, th, td{
border: 1px #ddd solid;
margin: 10;
}
table{
border-collapse: collapse;
margin: auto;
}
tr:nth-child(even) {
background-color: #dddddd;
}<div class = widget>
<div class = buttons>
<button class = lateral id = bmi onclick="change(0)">BMI</button>
<button class = lateral id = ideal onclick="change(1)">Ideal weight</button>
<button class = lateral id = calories onclick="change(2)">Calories requirement</button>
<button class = lateral id = water onclick="change(3)">Water requirement</button>
<button class = lateral id = fat onclick="change(4)">Body fat percentage</button>
</div>
<div class = calculator>
<div class = bmi id = b>
<h1 class = subT>BMI calculator</h1>
<p>The BMI (body mass index) is and index that tells you if<br>
your weight is good or not. Here is the table for results:
</p>
<table>
<tr>
<th><b>BMI</b></td>
<th><b>Condition</b></td>
</tr>
<tr>
<td><16.5</td>
<td>Seriusly underweight</td>
</tr>
<tr>
<td>16.5-18.5</td>
<td>Underweight</td>
</tr>
<tr>
<td>18.5-24.5</td>
<td>In shape</td>
</tr>
</table>
<form>
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Insert your weight (in kilograms):</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
</form>
</div>
<div class = ideal id = i>
<h1 class = subT>Ideal weight</h1>
<p>All we have our weight, but we don't know if it is too low <br>
or too high. The ideal weight is a weight calculated using your age,<br>
your height and your gender. This is the weight we should have to be in shape</p>
<form>
<!--form with required entry-->
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Insert your age :</p>
<input type = "number">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your ideal weight is:</p>
</form>
</div>
<div class = calories id = c>
<h1 class = subT>Calories requirement</h1>
<p> Calories are used as fuel from our body. They are necessary for our<br>
life. When you consume too little calories, your body fat reduces, when you<br>
consume too much, your fat increase. So, is necessary know the correct <br>
amount of calories to consume. It depends on your ideal weight, your gender<br>
and how much calories you burn during the day</p>
<form>
<!--form with required entry-->
<p>Insert your ideal weight (in kilograms):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Age:</p>
<input type = "number">
<p>Type of work:</p>
<select>
<option value = "sed">Sedentary</option>
<option value = "qhe">Quite heavy</option>
<option value = "hev">Heavy</option>
</select>
<p>Wourkout</p>
<select>
<option value = "sed">Less than 2hrs a week</option>
<option value = "qhe">Beetween 2 and 5 hrs a week</option>
<option value = "hev">Over 5hrs a week</option>
</select>
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your calories requirement is:</p>
</form>
</div>
<div class = water id = w>
<h1 class = subT>Water requirement</h1>
<p>Water is one of the most important think we consume. <br>
There is a formula that shows how much water we should drink.<br>
The formula is the following </p>
<p>weight(in kilograms)*30ml</p>
<p>Insert your actual weight:</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your water requirement is:</p>
</div>
<div class = fat id = f>
<h1 class = subT>Body fat percentage</h1>
<p>Your fat percentage show you simply if you have too much fat in your<br>
body. Here is the table to compare your results</p>
<table>
<tr>
<th></td>
<th><b>Male</b></td>
<th><b>Female</b></th>
</tr>
<tr>
<td>Athletes</td>
<td>5.0-13.0</td>
<td>12.0-16.0</td>
</tr>
<tr>
<td>Preatty active persons</td>
<td>13.0-18.0</td>
<td>16.0-25.0</td>
</tr>
<tr>
<td>Overweight</td>
<td>19.0-24.0</td>
<td>25.0-31.0</td>
</tr>
<tr>
<td>Obese</td>
<td>>24.0</td>
<td>>31.0</td>
</tr>
</table>
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Insert waist circumference:</p>
<input type = "text">
<p>Insert neck circumference:</p>
<input type = "text">
<p>Insert flanks circumference:</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your body fat percentage is:</p>
</div>
</div>
</div>我第一次进入站点时，卡片周围的边框仍然存在，并且在属性之后，但是当我改变我正在可视化的卡片时，我再也看不到了。
我不知道是否有属性(property)的主权，或者我是否在不知情的情况下改变了一些东西。
有人可以告诉我一些事情吗？谢谢
最佳答案
尝试在此处将 inline 更改为 block cardA[i].style.display = "inline"; :
function change(c){
let btn0 = document.getElementById("bmi");
let btn1 = document.getElementById("ideal");
let btn2 = document.getElementById("calories");
let btn3 = document.getElementById("water");
let btn4 = document.getElementById("fat");
let btnA = [btn0, btn1, btn2, btn3, btn4];
let card0 = document.getElementById("b");
let card1 = document.getElementById("i");
let card2 = document.getElementById("c");
let card3 = document.getElementById("w");
let card4 = document.getElementById("f");
let cardA = [card0, card1, card2, card3, card4];
for(let i=0; i<5; i++){
if (i==c){
btnA[i].style.backgroundColor = "#f00";
cardA[i].style.display = "block";
}else{
btnA[i].style.backgroundColor = "#ddd";
cardA[i].style.display = "none";
}
cardA[i].style.backgroundColor = "#f00";
}
}.title{
font-family: 'Merriweather', serif;
text-align: center;
color: red;
margin-top: 20px;
font-size: 40pt;
font-weight: 3000;
}
.infoBar{
width:50%;
margin: auto;
}
.topMenu{
font-family: 'Merriweather', serif;
font-size: 18pt;
height: 50px;
width: 32%;
margin: -3px;
background-color: blue;
border-left:1px white solid;
border-right:1px white solid;
border-radius: 50px;
}
.startingContent{
text-align: center;
margin-top: 30px;
font-family: 'Merriweather', serif;
font-size: 20pt;
font-weight: 200;
}
.image{
margin: auto;
height:30%;
width:30%;
margin-top: 30px;
}
.widget{
display:flex;
margin: auto;
}
.buttons{
display: flex;
flex-direction: column;
}
.lateral{
height: 75px;
width: 85px;
padding: 5px;
border-radius: 0px;
border: 1px #ddd solid;
background-color: #ddd;
margin: 0px;
border-top-right-radius: 15px 15px;
border-bottom-left-radius: 15px 15px;
}
#bmi{
background-color: #f00;
}
.lateral:hover{
background-color: #fff;
transition: 1s;
border: #fff solid 1px;
}
.ideal,.calories, .water, .fat, .bmi{
width:70%;
border: 1px solid blue;
margin-top: -20px;
border-top-right-radius: 30px 30px;
border-bottom-left-radius: 30px 30px;
}
.ideal,.calories, .water, .fat{
display: none;
}
table, th, td{
border: 1px #ddd solid;
margin: 10;
}
table{
border-collapse: collapse;
margin: auto;
}
tr:nth-child(even) {
background-color: #dddddd;
}<div class = widget>
<div class = buttons>
<button class = lateral id = bmi onclick="change(0)">BMI</button>
<button class = lateral id = ideal onclick="change(1)">Ideal weight</button>
<button class = lateral id = calories onclick="change(2)">Calories requirement</button>
<button class = lateral id = water onclick="change(3)">Water requirement</button>
<button class = lateral id = fat onclick="change(4)">Body fat percentage</button>
</div>
<div class = calculator>
<div class = bmi id = b>
<h1 class = subT>BMI calculator</h1>
<p>The BMI (body mass index) is and index that tells you if<br>
your weight is good or not. Here is the table for results:
</p>
<table>
<tr>
<th><b>BMI</b></td>
<th><b>Condition</b></td>
</tr>
<tr>
<td><16.5</td>
<td>Seriusly underweight</td>
</tr>
<tr>
<td>16.5-18.5</td>
<td>Underweight</td>
</tr>
<tr>
<td>18.5-24.5</td>
<td>In shape</td>
</tr>
</table>
<form>
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Insert your weight (in kilograms):</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
</form>
</div>
<div class = ideal id = i>
<h1 class = subT>Ideal weight</h1>
<p>All we have our weight, but we don't know if it is too low <br>
or too high. The ideal weight is a weight calculated using your age,<br>
your height and your gender. This is the weight we should have to be in shape</p>
<form>
<!--form with required entry-->
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Insert your age :</p>
<input type = "number">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your ideal weight is:</p>
</form>
</div>
<div class = calories id = c>
<h1 class = subT>Calories requirement</h1>
<p> Calories are used as fuel from our body. They are necessary for our<br>
life. When you consume too little calories, your body fat reduces, when you<br>
consume too much, your fat increase. So, is necessary know the correct <br>
amount of calories to consume. It depends on your ideal weight, your gender<br>
and how much calories you burn during the day</p>
<form>
<!--form with required entry-->
<p>Insert your ideal weight (in kilograms):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Age:</p>
<input type = "number">
<p>Type of work:</p>
<select>
<option value = "sed">Sedentary</option>
<option value = "qhe">Quite heavy</option>
<option value = "hev">Heavy</option>
</select>
<p>Wourkout</p>
<select>
<option value = "sed">Less than 2hrs a week</option>
<option value = "qhe">Beetween 2 and 5 hrs a week</option>
<option value = "hev">Over 5hrs a week</option>
</select>
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your calories requirement is:</p>
</form>
</div>
<div class = water id = w>
<h1 class = subT>Water requirement</h1>
<p>Water is one of the most important think we consume. <br>
There is a formula that shows how much water we should drink.<br>
The formula is the following </p>
<p>weight(in kilograms)*30ml</p>
<p>Insert your actual weight:</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your water requirement is:</p>
</div>
<div class = fat id = f>
<h1 class = subT>Body fat percentage</h1>
<p>Your fat percentage show you simply if you have too much fat in your<br>
body. Here is the table to compare your results</p>
<table>
<tr>
<th></td>
<th><b>Male</b></td>
<th><b>Female</b></th>
</tr>
<tr>
<td>Athletes</td>
<td>5.0-13.0</td>
<td>12.0-16.0</td>
</tr>
<tr>
<td>Preatty active persons</td>
<td>13.0-18.0</td>
<td>16.0-25.0</td>
</tr>
<tr>
<td>Overweight</td>
<td>19.0-24.0</td>
<td>25.0-31.0</td>
</tr>
<tr>
<td>Obese</td>
<td>>24.0</td>
<td>>31.0</td>
</tr>
</table>
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Insert waist circumference:</p>
<input type = "text">
<p>Insert neck circumference:</p>
<input type = "text">
<p>Insert flanks circumference:</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your body fat percentage is:</p>
</div>
</div>关于javascript - JavaScript 函数后的 Css 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68972308/