javascript - jQuery add class when clicked and remove when clicked on another - Stack Overflow

admin管理员组

文章数量:1335371

I have the markup like this

<div class="personal-menu-content">
    <ul>
         <li><a data-menu-item="lessons" class="personal-menu-item lessons" href="#">Lessons</a></li>
         <li><a data-menu-item="profile" class="personal-menu-item profile" href="#">Edit Profile</a></li>
         <li><a data-menu-item="library" class="personal-menu-item library" href="#">Your Library</a></li>
    </ul>
</div>

<div class="contents">
    <div id="lessons">
        <h2>Lessons text here</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <div id="profile">
        <h2>profile text here</h2>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
    <div id="library">
        <h2>library text here</h2>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,</p>
    </div>
</div>

and the JS like this

$('div#profile').show();
    $('body').on('click','a.personal-menu-item', function(e) {
        e.preventDefault();
        var selectedItem = $(this).attr('data-menu-item');
        if(selectedItem == 'lessons') {
            $('div#lessons').show();
            $('div#profile').hide();
            $('div#library').hide();
        }
        if(selectedItem == 'profile') {
            $('div#lessons').hide();
            $('div#profile').show();
            $('div#library').hide();
        }
        if(selectedItem == 'library') {
            $('div#lessons').hide();
            $('div#profile').hide();
            $('div#library').show();
        }
    });

so here I want that when I click on the lessons then only lessons content will be shown , like this when I click on profile and library then only profile and library will be shown. Here its working fine but I wanted to know how to add a class active when one item is clicked within that anchor tag. Lets say I click on lessons then one active class should be added to the lessons anchor tag and when I click on profile then the active class should be remove from lessons anchor tag and it should add class active in profile anchor tag. Here is my fiddle so far

I have the markup like this

<div class="personal-menu-content">
    <ul>
         <li><a data-menu-item="lessons" class="personal-menu-item lessons" href="#">Lessons</a></li>
         <li><a data-menu-item="profile" class="personal-menu-item profile" href="#">Edit Profile</a></li>
         <li><a data-menu-item="library" class="personal-menu-item library" href="#">Your Library</a></li>
    </ul>
</div>

<div class="contents">
    <div id="lessons">
        <h2>Lessons text here</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <div id="profile">
        <h2>profile text here</h2>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
    <div id="library">
        <h2>library text here</h2>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,</p>
    </div>
</div>

and the JS like this

$('div#profile').show();
    $('body').on('click','a.personal-menu-item', function(e) {
        e.preventDefault();
        var selectedItem = $(this).attr('data-menu-item');
        if(selectedItem == 'lessons') {
            $('div#lessons').show();
            $('div#profile').hide();
            $('div#library').hide();
        }
        if(selectedItem == 'profile') {
            $('div#lessons').hide();
            $('div#profile').show();
            $('div#library').hide();
        }
        if(selectedItem == 'library') {
            $('div#lessons').hide();
            $('div#profile').hide();
            $('div#library').show();
        }
    });

so here I want that when I click on the lessons then only lessons content will be shown , like this when I click on profile and library then only profile and library will be shown. Here its working fine but I wanted to know how to add a class active when one item is clicked within that anchor tag. Lets say I click on lessons then one active class should be added to the lessons anchor tag and when I click on profile then the active class should be remove from lessons anchor tag and it should add class active in profile anchor tag. Here is my fiddle so far

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 13, 2015 at 8:28 NewUserNewUser 13.3k4040 gold badges150150 silver badges240240 bronze badges 1

• Sorry to say that, but this is probably the most horrible, heaviest way of showing/hiding elements in a list. It's very surprising from someone with your reputation level (almost 3000). Imagine you have 20 elements in your list, would you manually test every single one at every click, and manually hide the 19 others, wrapping each one of them in a jQuery object at every line without caching any? My eyes hurt :) Sweet solution by Void below. – Jeremy Thille Commented Feb 13, 2015 at 8:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

Short and sweet way.

$(".personal-menu-item").click(function(){

 $(".personal-menu-item").removeClass("active");
 $(this).addClass("active");

});

You can just use this reference in the click handler

$('body').on('click.menu', 'a.personal-menu-item', function(e) {
  e.preventDefault();
  var selectedItem = $(this).attr('data-menu-item');
  var $selected = $('#' + selectedItem).show();
  $('.contents > div').not($selected).hide();
  $('.personal-menu-content .active').removeClass('active')
  $(this).addClass('active');
});
$('.personal-menu-content a[data-menu-item="profile"]').trigger('click.menu')

.contents > div {
  display: none;
}
.active {
  color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="personal-menu-content">
  <ul>
    <li><a data-menu-item="lessons" class="personal-menu-item lessons" href="#">Lessons</a></li>
    <li><a data-menu-item="profile" class="personal-menu-item profile" href="#">Edit Profile</a></li>
    <li><a data-menu-item="library" class="personal-menu-item library" href="#">Your Library</a></li>
  </ul>
</div>

<div class="contents">
    <div id="lessons">
        <h2>Lessons text here</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <div id="profile">
        <h2>profile text here</h2>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
    <div id="library">
        <h2>library text here</h2>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,</p>
    </div>
</div>

Basically, hide them all, then show only the one you want. Only need to change two lines :)

Edit: Similarly, remove all the active classes and add it only to the one that was clicked.

$('body').on('click','a.personal-menu-item', function(e) {
    e.preventDefault();

    $('.personal-menu-content .active').removeClass('active')

    var selectedItem = $(this).addClass('active').attr('data-menu-item');

    $('.contents > div').hide();
    $('#' + selectedItem).show();
});

Try this

$('div#profile').show();
$('body').on('click','a.personal-menu-item', function(e) {
    e.preventDefault();
     var selectedItem = $(this).parent('li').index();
    alert(selectedItem);
     $('.contents div').hide();         
     $('.contents div').eq(selectedItem).show();
});

https://jsfiddle/pjdq1h83/

本文标签： javascriptjQuery add class when clicked and remove when clicked on anotherStack Overflow