如何在HTML和CSS中制作一個簡單的評分系統？

我想為我的網站制作一個簡單的評分系統，所以當用戶點擊“是”時，它會顯示一條帶有“謝謝”的綠色訊息，如果用戶點擊“否”，則會顯示一條帶有“抱歉”的紅色訊息聽到。”。

我一直在努力使這項作業有一段時間了，但似乎無法弄清楚，有人可以幫助我嗎？另外，如何才能使訊息僅在用戶單擊時顯示，而不是懸停在它們上方？

這是我的代碼：

.rating {
  background: #0084FF;
  color: #fff;
  padding: 20px;
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

.rating a {
  color: #fff;
}

.thanks {
display: none;
background: green;
color: #fff;
padding: 20px;
margin: 0px;
}

.sorry {
  display: none;
  background: red;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

.yes:hover #thanks {
display: block;
}

.no:hover #sorry {
  display: block;
}

<div class="rating" id="rating">
        Was This Helpful? &nbsp;&nbsp;&nbsp;&nbsp; <a href="#rating" class="yes" id="yes">Yes</a> &nbsp;&nbsp; <a href="#rating" class="no" id="no">No</a>
    
        <div class="thanks" id="thanks">
            Thank You!
        </div>
        <div class="sorry" id="sorry">
            We're sorry to hear that!
        </div>
    </div>

uj5u.com熱心網友回復：

您可以使用 :target 偽類來顯示一個或另一個

.rating {
  background: #0084FF;
  color: #fff;
  padding: 20px;
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

.rating a {
  color: #fff;
}

.thanks {
display: none;
background: green;
color: #fff;
padding: 20px;
margin: 0px;
}

.sorry {
  display: none;
  background: red;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

#thanks:target {
display: block;
}

#sorry:target {
  display: block;
}

<div class="rating" id="rating">
        Was This Helpful? &nbsp;&nbsp;&nbsp;&nbsp; <a href="#thanks" class="yes" id="yes">Yes</a> &nbsp;&nbsp; <a href="#sorry" class="no" id="no">No</a>
    
        <div class="thanks" id="thanks">
            Thank You!
        </div>
        <div class="sorry" id="sorry">
            We're sorry to hear that!
        </div>
    </div>

uj5u.com熱心網友回復：

如果可能，您可能必須存盤回答“是”和回答“否”的人數的值（在 SQL 資料庫中）。

然后，您可以比較這兩個值。

要回傳平均你可以檢查這個這個

Reccomended鏈接：設計：https://www.jqueryscript.net/blog/best-rating-systems.html 的Javascript：https://dev.to/leonardoschmittk/how-to-make- a-star-rating-with-js-36d3

uj5u.com熱心網友回復：

為此，您需要添加 JavaScript 或 jQuery，這是您的選擇。

這是完整示例

var yes = document.getElementById('yes');
var no = document.getElementById('no');

yes.addEventListener("click", function(){
  document.getElementById('rating').style.background = 'green';
  document.getElementById('thanks').style.display = 'block';
  document.getElementById('sorry').style.display = 'none';
});

no.addEventListener("click", function(){
  document.getElementById('rating').style.background = 'red';
  document.getElementById('sorry').style.display = 'block';
  document.getElementById('thanks').style.display = 'none';
});

.rating {
  background: #0084FF;
  color: #fff;
  padding: 20px;
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

.rating a {
  color: #fff;
}

.thanks {
display: none;
background: green;
color: #fff;
padding: 20px;
margin: 0px;
}

.sorry {
  display: none;
  background: red;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

.yes:hover #thanks {
display: block;
}

.no:hover #sorry {
  display: block;
}

<div class="rating" id="rating">
        Was This Helpful? &nbsp;&nbsp;&nbsp;&nbsp; <a href="#rating" class="yes" id="yes">Yes</a> &nbsp;&nbsp; <a href="#rating" class="no" id="no">No</a>
    
        <div class="thanks" id="thanks">
            Thank You!
        </div>
        <div class="sorry" id="sorry">
            We're sorry to hear that!
        </div>
    </div> 

標籤：html css

上一篇：如何更改背景顏色但保留背景影像與css中的父元素

下一篇：回應式圖片，scrset為螢屏寬度的25%，選擇大圖