Javascript 单击时，从另一个 div 添加/删除类

On click, add/remove class from another div

提问by Connor

I am looking to add/remove a class from another div when a link is pressed. I have searched through several answers and searched online but could not find an answer that worked for me.

我希望在按下链接时从另一个 div 添加/删除一个类。我搜索了几个答案并在网上搜索，但找不到对我有用的答案。

Here is my code:

这是我的代码：

<nav id="primary-menu"> <a class="menu-toggle">Browse</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Rumors</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Miscellaneous</a></li>
    </ul>
</nav> <!-- end #primary-menu -->

I am looking to add the class activeto #primary-menuwhen .menu-toggleis clicked.

我期待添加类active到#primary-menu时.menu-toggle被点击。

For JS/jQuery, I've tried click, toggle, toggleClass, I've tried inlining the code, I've tried external scripts. Nothing seems to work and I'm not sure why.

对于 JS/jQuery，我试过click, toggle, toggleClass，我试过内联代码，我试过外部脚本。似乎没有任何效果，我不知道为什么。

I'd really appreciate your responses. PS: I'm not the best with JS/jQuery.

我真的很感激你的回答。PS：我对 JS/jQuery 不是最好的。

回答by Tim Hallyburton

http://jsfiddle.net/te7brkmj/
this combination of 'click' and 'toggleClass' works for me.

http://jsfiddle.net/te7brkmj/
这种“click”和“toggleClass”的组合对我有用。

$('.menu-toggle').click( function() {
    $("#primary-menu").toggleClass("someClass");
} );

Try this:

尝试这个：

$('.menu-toggle').click( function() {
    $("#primary-menu").toggleClass("someClass");
} );

.someClass{
    color: red;    
}   

 

   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<nav id="primary-menu">

<a class="menu-toggle">Browse</a>

    <ul>

        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Rumors</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Miscellaneous</a></li>

    </ul>

</nav> <!-- end #primary-menu -->

回答by JFK

You could do

你可以做

$(".menu-toggle").on("click", function(){
    $(this).parent("#primary-menu").toggleClass("active");
});

NOTE: .on()requires jQuery v1.7+

注意：.on()需要 jQuery v1.7+

回答by shmuli

First make sure that you've loaded jQuery. Then try something like this:

首先确保您已加载 jQuery。然后尝试这样的事情：

 $( document ).ready(function() {
        $( "li" ).click(function() {
            $( "#primary-menu" ).toggleClass( "active" );
        });
    });   

回答by Sid

I am not sure if I understand your question, but I think you are asking a similar question as this..Check out the below link, you can get the classname by Document.getElementsByClassName('Class name').

我不确定我是否理解您的问题，但我认为您在问与此类似的问题..查看以下链接，您可以通过 Document.getElementsByClassName('Class name') 获取类名。

Remove class from elements in pure Javascript?

从纯Javascript中的元素中删除类？