如何通过将鼠标悬停在Javascript中的三个按钮之一来显示和更新隐藏的div元素?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何通过将鼠标悬停在Javascript中的三个按钮之一来显示和更新隐藏的div元素?相关的知识,希望对你有一定的参考价值。
我想将鼠标悬停在按钮上,并希望使用java脚本在其下方显示隐藏的div / panel。我的javascript是外部包含并且工作正常,我试图使用DOM模型来改变div的样式和innerhtml但是不起作用。这是我的HTML,Javascript和CSS代码。我甚至传递参数来验证哪个按钮悬停但是失败了。 HTML
<div class="container">
<div class="row anchorbutton">
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
<a href=#><div class=" mainbuttons b1 text-center"
onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout
Programs</div></a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
<a href=#><div class=" mainbuttons b2 text-center"
onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet
Plans</div></a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
<a href=#><div class=" mainbuttons b3 text-center"
onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food
Supplements</div></a>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default hidden">
<div class="hoverable panel-body hidden"> </div>
</div>
</div>
JS
function hidepanel(){
var panel=document.getElementsByClassName("hidden");
panel.style.display=none;
}
function updatepanel(x){
var desc1="Get fully customized workout programs from our dedicated fitness
experts.";
var desc2="Nutrional advice and diet plans just for your needs!";
var desc3="Our very own state-of-the-art line of supplementations.Click to
Order";
if(x==1){}
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc1';
}
if(x==2){
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc2';
}
if(x==3){
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc3';
}
}
CSS
.hidden{
display: none;
}
我也尝试通过更改功能来改变功能onClick而不是onmousehover,但它不会工作。请帮助我,我一直在敲我的脑袋。
document.getElementsByClassName()
返回一个HTML Collection
,这是一个元素的集合,所以说像collection.style.display
或collection.innerHTML
这样的东西并没有多大意义。我认为你想要做的是抓住单个元素并更新属性,如下所示:
document.getElementsByClassName("hidden")[0]
。
如果你需要迭代集合,你可以访问length
属性并做一个传统的for
循环,或者你可以使用ES6做Array.from()
。
function hidepanel() {
var panel = document.querySelector(".hidden");
panel.style.display = "none";
}
function updatepanel(x) {
var desc1 = "Get fully customized workout programs from our dedicated fitness experts.";
var desc2 = "Nutrional advice and diet plans just for your needs!";
var desc3 = "Our very own state-of-the-art line of supplementations.Click to Order";
// make variable so we don't have to search the DOM 2 times for every panel
var hiddenElem = document.querySelector(".hidden");
var panelBody = document.querySelector(".panel-body");
if (x == 1) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc1';
}
// don't evaluate unnecessarily
else if (x == 2) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc2';
}
// don't evaluate unnecessarily
else if (x == 3) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc3';
}
}
.hidden{
display: none;
}
<div class="container">
<div class="row anchorbutton">
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
<a href=#>
<div class=" mainbuttons b1 text-center" onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout Programs
</div>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
<a href=#>
<div class=" mainbuttons b2 text-center" onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet Plans
</div>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
<a href=#>
<div class=" mainbuttons b3 text-center" onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food Supplements
</div>
</a>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default hidden">
<div class="hoverable panel-body"> </div>
</div>
</div>
首先document.getElementsByClassName
返回一个HTML集合,因此您必须指定要使用的元素的索引,例如:document.getElementsByClassName('hidden')[0]
。
第二个panel.style.display
必须定义为一个字符串,所以在你的隐藏函数中将none
更改为"none"
工作代码:https://codepen.io/sunrisem/pen/QagPLG
不要在你的html中使用内联javascript,而是循环元素并将事件监听器附加到它们。您可以在按钮上设置数据属性,因此您可以创建一个如下所示的数组来保存文本,也可以将文本作为数据属性。您还需要一个对鼠标做出反应而离开按钮的侦听器,以再次隐藏div。您应该可以轻松地更改代码以适合您的类...
let div = document.getElementById('d');
let descriptions = [
"Get fully customized workout programs from our dedicated fitness experts.",
"Nutrional advice and diet plans just for your needs!",
"Our very own state-of-the-art line of supplementations.Click to Order"
];
document.querySelectorAll('.btn').forEach(e => {
e.addEventListener('mouseover', ({
target
}) => {
div.innerHTML = descriptions[target.getAttribute('data-nr')];
div.classList.remove('hidden');
}, false);
e.addEventListener('mouseout', () => {
d.classList.add('hidden');
}, false)
});
.hidden {
display: none;
}
div {
margin-top: 10px;
color: red;
}
<button class="btn" data-nr="0">
1
</button>
<button class="btn" data-nr="1">
2
</button>
<button class="btn" data-nr="2">
3
</button>
<div id="d" class="hidden">
</div>
以上是关于如何通过将鼠标悬停在Javascript中的三个按钮之一来显示和更新隐藏的div元素?的主要内容,如果未能解决你的问题,请参考以下文章
将鼠标悬停在Javascript和/或CSS列表中的相应单词时,如何显示不同的图像?
将鼠标悬停在图像上以获取一个带有 html/JavaScript 中的多个链接的框