我有一个导航菜单,显示一组来自单击主题的注释。便笺可以是类note
(如果它是可见的),也可以是类invisible
(如果它是隐藏的)。我只想从点击的主题中显示注释。
问题是,其他主题的一些注释也在展示。即使thistopic
的长度始终为2。
我是JavaScript新手,所以可能我的循环中有错误?提前致谢:)
null
function openTopic(evt, topicName) {
var allNotes, thisTopic;
/* Hide all notes */
allNotes = document.getElementsByClassName("note");
for (i = 0; i < allNotes.length; i++) {
allNotes[i].classList.add("invisible");
allNotes[i].classList.remove("note");
}
/* Show notes with correct topic */
thisTopic = document.getElementsByClassName(topicName);
for (i = 0; i < thisTopic.length; i++) {
thisTopic[i].classList.add("note");
thisTopic[i].classList.remove("invisible");
}
}
.box {
border-radius: 10px;
box-shadow: 5px 5px 8px #999;
margin: 10px;
padding: 10px;
}
.note {
display: block;
background-color: #ddd;
}
.invisible {
display: none;
}
<nav class='box'>
<h3>Navigation</h3>
<ul>
<li onClick="openTopic(event, 'topic1')">Topic 1</li>
<li onClick="openTopic(event, 'topic2')">Topic 2</li>
<li onClick="openTopic(event, 'topic3')">Topic 3</li>
</ul>
</nav>
<main>
<section class='note topic1 box'>
<p>First topic 1 note</p>
</section>
<section class='note topic1 box'>
<p>Second topic 1 note</p>
</section>
<section class='note topic2 box'>
<p>First topic 2 note</p>
</section>
<section class='note topic2 box'>
<p>Second topic 2 note</p>
</section>
<section class='note topic3 box'>
<p>First topic 3 note</p>
</section>
<section class='note topic3 box'>
<p>Second topic 3 note</p>
</section>
</main>
null
您的代码有两个问题:
note
类。invisible
类。null
function openTopic(evt, topicName) {
var allNotes, thisTopic;
/* Hide all notes */
allNotes = document.getElementsByClassName("note");
for (i = 0; i < allNotes.length; i++)
allNotes[i].classList.add("invisible");
/* Show notes with correct topic */
thisTopic = document.getElementsByClassName(topicName);
for (i = 0; i < thisTopic.length; i++)
thisTopic[i].classList.remove("invisible");
}
.box {
border-radius: 10px;
box-shadow: 5px 5px 8px #999;
margin: 10px;
padding: 10px;
}
.note {
display: block;
background-color: #ddd;
}
.note.invisible {
display: none;
}
html lang-html prettyprint-override"><nav class='box'>
<h3>Navigation</h3>
<ul>
<li onClick="openTopic(event, 'topic1')">Topic 1</li>
<li onClick="openTopic(event, 'topic2')">Topic 2</li>
<li onClick="openTopic(event, 'topic3')">Topic 3</li>
</ul>
</nav>
<main>
<section class='note topic1 box'>
<p>First topic 1 note</p>
</section>
<section class='note topic1 box'>
<p>Second topic 1 note</p>
</section>
<section class='note topic2 box invisible'>
<p>First topic 2 note</p>
</section>
<section class='note topic2 box invisible'>
<p>Second topic 2 note</p>
</section>
<section class='note topic3 box invisible'>
<p>First topic 3 note</p>
</section>
<section class='note topic3 box invisible'>
<p>Second topic 3 note</p>
</section>
</main>
本文向大家介绍详解用JS添加和删除class类名,包括了详解用JS添加和删除class类名的使用技巧和注意事项,需要的朋友参考一下 下面介绍一下如何给一个节点添加和删除class名 添加:节点.classList.add("类名"); 删除:节点.classList.remove("类名"); 以tab切换为例: 在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给被选中的
在CodeIgniter中添加JavaScript和CSS(层叠样式表)文件非常简单。 你必须在根目录中创建JS和CSS文件夹,并复制JS文件夹中的所有.js文件和CSS文件夹中的.css文件,如图所示。 例如,假设您已经创建了一个JavaScript文件sample.js和一个CSS文件style.css 。 现在,要将这些文件添加到视图中,请在控制器中加载URL帮助程序,如下所示。 $this
我正在使用Wordpress标签在我的网站上创建特色文章部分(主页上显示了3篇最新的标记为“特色”的文章),代码如下: 每个条目都包裹着“特色文章”,但由于我希望第一个帖子是全宽的,其他2个半宽的,我想知道如何给它们添加合适的类?所以,第一个帖子得到“全宽度”类和另外两个“半宽度”... 如果我没有正确解释(英语不是第一语言)我道歉。 任何帮助都将不胜感激
通过使用Thymeleaf作为模板引擎,是否可以使用子句在简单的中动态添加/删除CSS类? 通常,我可以使用以下条件子句: 我们将创建指向lorem ipsum页面的链接,但前提是条件子句为true。 我在寻找一些不同的东西:我希望块总是可见的,但是根据情况可以改变类。
问题内容: 我正在使用 jQuery* 更改 CSS ,并希望根据输入值删除要添加的样式: * 我怎样才能做到这一点? 请注意,只要使用颜色选择器选择了颜色(即,当鼠标移至色轮上时),以上行就会运行。 第二注:我不能这样做,因为它将从 CSS* 文件中删除默认样式。 我只想删除 jQuery添加的内联样式。 * 问题答案: 将属性更改为空字符串似乎可以完成此工作:
您好,我对jquery没有什么问题。首先,我有: 大众BORA 1.9TDI 1990 1995 奥迪A3 2.0TFSI 2006 2008 但我想实现: VW BORA 1.9TDI 1990 VW BORA 1.9TDI 1991 VW BORA 1.9TDI 1992 VW BORA 1.9TDI 1993 VW BORA 1.9TDI 1994 VW BORA 1.9TDI 1995 A