There are tabs, when you click on them by adding classes, the tab icon changes. It is necessary that when you click on any other tab, the inactive elements remove the modifying classes. How to do it right? [example] [1] for the first two tabs made, as it should be about.

[1]: https://codepen.io/Nick_Krogan/pen/zNQqam

    3 answers 3

    You should use toggleClass('ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ класс') instead of .removeClass and .addClass . This method works as a switch, that is, if there is a modifying class, then it removes it, if not, it assigns the opposite.

    • If you use togl, then the class will turn on and off when you click on the same element. it is necessary that it be removed only by clicking on other tabs - nollac

    If you have a certain set of elements united by a common class, for example, $('.vkladka') or a common parent $('#vkladki > div') , then it is very easy to remove the unnecessary class from them:

     $('#vkladki > div').removeClass('active')

    And then immediately assign a new one:

     $(this).addClass('active')

    And it is also possible to exclude from the group of elements the active using not() :

     $('#vkladki > div').not(this).removeClass('active')

    Another option is to get adjacent with pressed items using siblings()

     $(this).addClass('active').siblings().removeClass('active')

    Living example:

     $('#vkladki > div').click(function() { $(this).addClass('active') $('#vkladki > div').not(this).removeClass('active') }) 
     #vkladki>div { width: 100px; padding: 4px; border: 1px solid #ccc; display: inline-block; cursor:pointer;} #vkladki>div.active { border: 1px solid red } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="vkladki"> <div class=active>1</div> <div>2</div> <div>3</div> <div>4</div> </div>

    A live example with siblings() :

     $('#vkladki > div').click(function() { $(this).addClass('active').siblings().removeClass('active') }) 
     #vkladki>div { width: 100px; padding: 4px; border: 1px solid #ccc; display: inline-block; cursor:pointer;} #vkladki>div.active { border: 1px solid red } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="vkladki"> <div class=active>1</div> <div>2</div> <div>3</div> <div>4</div> </div>

    • All active classes are different - in each tab, the icon and border are painted in their own color. if it were necessary to apply the same active class to everyone, there would be no questions. how can I select all classes ending in a definition. a word like red_item, blue_item, etc. Follow the link to the code below the post. there is an example - nollac

    With .find ('Common tab identifier') you take all the tabs, and by clicking on any tab you delete the modifying class from everyone, then you add the class to the tab $ (this) .addClass ('Modifying class') you click;