JavaScript：如何通过单击另一个 div 来更改 div 的类？答案

【问题标题】：JavaScript: How can I change the class of a div by clicking another div?JavaScript：如何通过单击另一个 div 来更改 div 的类？
【发布时间】：2017-05-13 20:01:07
【问题描述】：

当我点击另一个div 时，我想让div 出现。当点击另一个div 时，我正在考虑使用JavaScript 来更改div 的类。

这是我要显示的div 的 HTML：

<div id="menutext1" class="hidden"></div>

这是div控件的HTML（点击上面的div出现）：

<div id="menu1"></div>

这是 CSS：

.hidden { display: none; }

.unhidden { display: block; }

我到处看了看，似乎没有什么对我有用！

我对 JavaScript 或 JQuery 没有太多经验，但我能理解。

提前致谢:))

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

.addClass(), .removeClass() 应该做你需要的。 .toggleClass() 也可能有用。你想在你的 onClick() 方法中做这样的事情：

$('#menu1').click(function() {
    $('#menutext1').addClass('unhidden')
});

如果您希望能够隐藏/取消隐藏，请在 toggleClass() 中进行交换。我应该补充一点，这些是 JQuery 函数，因此请确保在您的项目中包含 JQuery。

【讨论】：

对于 OP - 虽然这个 jQuery 必须工作 - 我高度建议你先学习原生 JavaScript（并且很好）

【解决方案2】：

您有多种选择来实现这一目标：

$('#menu1').on('click', function(){
    $('#menutext1').show();
    // OR
    $('#menutext1').toggleClass('hidden unhidden');
    // OR
    $('#menutext1').removeClass('hidden ').addClass('unhidden');
});

Demo

注意：使用 jQuery 和 DOM 操作时，请查看 .ready() 函数。

参考

【讨论】：

【解决方案3】：

您可以使用classList.toggle 方法在不使用JQuery 的情况下完成此操作。而且你真的不需要unhidden 类。当hidden 类被关闭时，div 应该返回到它的默认显示（块）。

// get the element you want to click on
var controlDiv = document.getElementById('menu1');

// assign a function to run when it is clicked
controlDiv.addEventListener('click', function() {
    // turn the hidden class off or on
    document.getElementById('menutext1').classList.toggle('hidden');
});

【讨论】：