在彈出窗口中更改所選部分的背景顏色
[英]Changing the background-color of the selected portion in popup
問題描述
我創建了一個彈出窗口，如果單擊問號圖像，則可以創建一個包含文本列表的框。 小提琴在這里
我希望文本以以下方式顯示：
我能夠創建一個包含小提琴中所示文本列表的框，但是我不確定如何更改所選部分文本的背景顏色（例如：Support，Contact，Demo）。
例如，如果我選擇或單擊或將鼠標指向“ 支持”，則“ 支持”文本部分的背景色應為橙色，而其余部分應為黑色；或者，如果我選擇或單擊或將鼠標指向“ 聯系人”，則背景為其余文本的顏色應為黑色，而聯系人文本應具有橙色背景。
以下是小提琴中的HTML和CSS片段：
HTML片段：
<!DOCTYPE html>
<html>
<body style="text-align:center">
<br>
<br>
<br>
<br>
<br>
<br>
<div class="popup" onclick="myFunction()"><img src="https://s27.postimg.org/40rb1a2ir/questionmark2.jpg" alt="homeicon">
<div class="popuptext" id="div">
<div><span id="myPopup">Support</span><br/></div>
<div><span id="myPopup1">Contact</span><br/></div>
<div><span id="myPopup2">Demo</span><br/></div>
</div>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById('div');
popup.classList.toggle('show');
}
</script>
</body>
</html>
CSS片段：
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #FD8B00;
color: #fff;
text-align: left;
padding:8px 10px 10px 120px;
position: absolute;
z-index: 1;
bottom: -225%;
left: -52px;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: -10%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color:#FD8B00 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
2 個解決方案
解決方案1
1 2016-12-16 02:50:32
這就是我要做的。
我重新創建了標記，以使其更好。 由於項目是鏈接（期望是鏈接）。 我用了ul li a 。
$(document).ready(() => { $('#clicker').click(() => { $('.dialog-box').fadeToggle(); }); $('.dialog-box li').click((e) => { var self = e.currentTarget; if(!$(self).hasClass('active')){ $('.dialog-box .active').removeClass('active'); $(self).addClass('active'); } }) });
* { margin: 0; padding: 0; } body { margin: 50px 0 0 200px; font-family: sans-serif; } a#clicker { margin-left: 80px; } ul.dialog-box { list-style: none; width: 200px; background: #434343; position: relative; display: none; margin-top: 20px; } ul.dialog-box:before { content: ''; position: absolute; top: -8px; left: calc(50% - 5px); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 8px solid #ff8a00; } ul.dialog-box li { padding: 8px 10px; cursor: pointer; } ul.dialog-box li:not(:first-child) { border-top: 1px solid #787878; } ul.dialog-box li.active { background: #ff8a00; } ul.dialog-box li a { color: white; font-weight: 600; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="clicker">Clicker</a> <ul class="dialog-box"> <li class="active"><a>Support</a></li> <li><a>Contact</a></li> <li><a>Demo</a></li> </ul>
解決方案2
0 2016-12-16 02:28:01
因此，我在下面的回答將告訴您單擊按鈕時如何更改背景顏色。 假設您有以下CSS代碼。
#div div.selected {
background-color: black;
}
然后，隨着用戶單擊按鈕，您需要刪除先前選擇的按鈕並更改當前選擇的按鈕的背景顏色。 您可以使用下面的jQuery代碼來實現：
$(document).ready(function(){
$('#div div').click(function(){
$('#div div.selected').removeClass('selected');
$(this).addClass("selected");
});
});
您也可以查看小提琴 。希望它對您有幫助。
背景顏色不變嗎？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.