我正在尝试让一些div按照我想要的方式运行。以下是我的相关HTML:
<ul class="services">
<li class="business-formation" id="services-li-1">Business Formation</li>
<li class="domestic-relations" id="services-li-2">Domestic Relations</li>
<li class="estate-probate" id="services-li-3">Estate & Probate</li>
</ul>
<div class="business-formation-list" id="business-formation-list">
<ul>
<li>Items go here</li>
</ul>
</div>
<div class="domestic-relations-list" id="domestic-relations-list">
<ul>
<li>Items go here</li>
</ul>
</div>
<div class="estate-probate-list" id="estate-probate-list">
<ul>
<li>Items go here</i>
</ul>
</div>
我希望div在相应的li被单击时出现和消失(它们是链接)。这是我的Javascript:
document.getElementById('services-li-1').style.cursor = "pointer";
document.getElementById('services-li-2').style.cursor = "pointer";
document.getElementById('services-li-3').style.cursor = "pointer";
const div1 = document.querySelector('business-formation-list');
const div2 = document.querySelector('domestic-relations-list');
const div3 = document.querySelector('estate-probate-list');
const click2 = document.getElementById('services-li-2');
document.addEventListener('click', (event) => {
if (event.click2.className = 'domestic-relations') {
div1.style.display = 'none';
div2.style.display = 'block';
div3.style.display = 'none';
}
});
这不会导致任何事情发生,但我希望它做的是在单击类名为“anything relations”的li时显示第二个div。我做错了什么?谢谢!
发布于 2018-06-09 09:11:10
如果你使用的是querySelector
,你需要告诉它它是一个类。您可以通过在相关类之前添加.
来做到这一点。
所以document.querySelector('business-formation-list')
应该是document.querySelector('.business-formation-list')
。
但是,如果您只使用它一次,它应该是一个ID,而不是一个类。
发布于 2018-06-10 09:58:49
我也是个新手,和你有类似的问题。我想出了一个解决方案,所以它可能对你也有帮助。这个解决方案很长,所以我希望你能容忍我。
第一件事就是把你的div类“家庭/地产/业务”改成“列表”。当你为它做css时,你会想要对它们应用相同的样式。如果您需要更多的样式,您可以始终以ID为目标或添加另一个css类。
完成此操作后,对该列表应用"display: none;“。这将一次隐藏所有的ul。
javascript看起来像这样。我添加了一些关于我为什么选择做我所做的事情的描述。
var serviceType = document.querySelectorAll(".serviceType");
var serviceTypeArray = Array.prototype.slice.call(serviceType); // this will
//change your serviceType from a nodelist to an Array.
var serviceDescription = document.querySelectorAll(".list"); // to grab the
//list of descriptions and make it into an "array"
for ( i = 0 ; i < serviceTypeArray.length ; i++) {
var services = serviceTypeArray[i]; // I created this variable to store the
// variable "i"
services.addEventListener( "click" , displayServices); }
// created this "for loop" to loop through every element inside the array
//and give it the "click" function
function displayServices() {
var servicePosition = serviceTypeArray.indexOf(this); // when we click the
// event, "this" will grab the position of the clicked item in the array
if (serviceTypeArray[servicePosition].hasAttribute("id") == false) { //
// the hasAttribute returns values of true/false, since initially the
// serviceTypeArray didn't have the "id" , it returns as false
serviceTypeArray[servicePosition].setAttribute( "id" , "hide"); // I've
// added the "setAttribute" function as a unique indicator to allow
// javascript to easily hide and show based on what we are clicking
serviceDescription[servicePosition].style.display = "block"; // When you
//click one of the serviceType, it returns an the index number (aka the
// position it is inside the arrayList)
//this gets stored inside servicePosition(aka the actual number gets
// stored).
// Since i've made an array to store the the description of each service,
// their position in the array correspond with the service's position
//inside the serviceType array made earlier; therefore, when I press one
// particular serviceType (ie i clicked on "business formation"), the
// appropriate text will pop up because the position of both the name and
// its description are in the same position in both arrays made
} else if (serviceTypeArray[servicePosition].hasAttribute("id") == true ) {
//since the serviceType now has an attribute, when we check it, it'll come
// back as true
serviceTypeArray[servicePosition].removeAttribute("id"); //we want to
// remove the id so next time we click the name again, the first "if"
// condition is checked
serviceDescription[servicePosition].style.display = "none"; //this is
// so that the display goes back to "none"
}
}
这将允许单击任何名称并随意显示/隐藏它们。您甚至可以显示2/3或全部三个,这取决于您。我希望这能有所帮助,并且我希望解释足够清楚!如果你对此有任何问题,请告诉我!
https://stackoverflow.com/questions/50770047
复制相似问题