Question

我试图让几个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';
}
});

这不会发生任何事情，但我想要做的是在点击类名为“domestic-relations”的li时出现第二个div。我究竟做错了什么？谢谢！

Answer 1

如果你正在使用querySelector，你需要告诉它它是一个类。您可以通过在相关课程之前添加.来实现此目的。

因此document.querySelector('business-formation-list')应为document.querySelector('.business-formation-list')。

但是，如果你只使用一次，它应该是一个ID，而不是一个类。

Answer 2

我对此也很新，并且遇到了类似的问题。我想出了一个解决方案，所以它也可以帮到你。解决方案很长，所以我希望你能忍受我。

首先，将您的div类“国内/房地产/商业”改为“列表”。当你为它做css时，你会想要对它们应用相同的样式。如果您需要更多样式，可以始终定位ID或添加另一个css类。

完成后，请将该列表应用于“display：none;”。这将立即隐藏所有的ul。

javascript看起来像这样。我已经添加了一些描述，为什么我选择做我做的事。

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':lint'.
> Could not resolve all files for configuration ':lintClassPath'.
   > Could not find com.android.tools:sdk-common:26.1.2.
     Searched in the following locations:
         file:/Users/rp/Library/Android/sdk/extras/m2repository/com/android/tools/sdk-common/26.1.2/sdk-common-26.1.2.pom
         file:/Users/rp/Library/Android/sdk/extras/m2repository/com/android/tools/sdk-common/26.1.2/sdk-common-26.1.2.jar

这将允许单击任何名称并随意显示/隐藏它们。你甚至可以显示2/3或全部三个，这取决于你。我希望这有所帮助，我希望解释清楚！如果您对此有任何疑问，请与我们联系！

使用javascript使div显示或消失

2 个答案: