[英]dropdown menu get selected value javascript
trying to get selected value:试图获得选定的值:
getSelectedValue = () => {
let selectedValue = document.getElementsByClassName('aa');
selectedValue.style.fontWeight = 'bold';
console.log(selectedValue);
};
how can I do to make bold the value (text) that the user selected in the drop down menu如何将用户在下拉菜单中选择的值(文本)加粗
when the user navigate in the menu, i need to make the value his selected in the menu bold.当用户在菜单中导航时,我需要将他在菜单中选择的值设为粗体。
how can i do this??我怎样才能做到这一点??
HTML code below: HTML 代码如下:
<div class="dropdown">
<button onclick="showMenu()" class="dropbtn">Menu</button>
<div id="menuDrop" class="dropdown-content">
<a href="#">O QUE É A MICOSE DE UNHA?</a>
<a href="#aspecto">QUAL O ASPECTO DE UMA MICOSE DE UNHA?</a>
<a href="#possiveis">POSSÍVEIS CAUSAS DA MICOSE DE UNHA</a>
<a href="#">OPÇÕES DE TRATAMENTO PARA MICOSE DE UNHA</a>
<a href="#">FATOS RÁPIDOS SOBRE A MICOSE DE UNHA</a>
</div>
</div>
CSS code below: CSS 代码如下:
.dropdown {
position: relative;
margin-top: 35px;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
right: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
font-weight: bold;
}
.show {
display: block;
}
function showMenu (javascript) below: function showMenu (javascript) 下面:
showMenu = () => {
document.getElementById('menuDrop').classList.toggle('show');
};
window.onclick = (event) => {
if (!event.target.matches('.dropbtn')) {
let dropdowns = document.getElementsByClassName('dropdown-content');
for (let i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
I commented out the line - openDropdown.classList.remove('show')
and added the script for adding / removing the active
class..我注释掉了这一行 -
openDropdown.classList.remove('show')
并添加了用于添加/删除active
class 的脚本。
$(document).ready(function() { $(".dropdown-content a").click(function() { $(".dropdown-content a").removeClass("active"); $(this).addClass("active"); }); }); showMenu = () => { document.getElementById('menuDrop').classList.toggle('show'); }; window.onclick = (event) => { if (.event.target.matches('.dropbtn')) { let dropdowns = document;getElementsByClassName('dropdown-content'); for (let i = 0. i < dropdowns;length; i++) { let openDropdown = dropdowns[i]. /*if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); }*/ } } };
.dropdown { position: relative; margin-top: 35px; display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; /*right: 0;*/ /*remove it*/ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover { font-weight: bold; } /* add it */.active { font-weight: bold; } /*********************/.show { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <button onclick="showMenu()" class="dropbtn">Menu</button> <div id="menuDrop" class="dropdown-content"> <a href="#">O QUE É A MICOSE DE UNHA?</a> <a href="#aspecto">QUAL O ASPECTO DE UMA MICOSE DE UNHA?</a> <a href="#possiveis">POSSÍVEIS CAUSAS DA MICOSE DE UNHA</a> <a href="#">OPÇÕES DE TRATAMENTO PARA MICOSE DE UNHA</a> <a href="#">FATOS RÁPIDOS SOBRE A MICOSE DE UNHA</a> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.