jQuery(function($) { $(".button1").click(function() { $(".imgEx1").addClass("active"); $(".imgEx2").removeClass("active"); $(".imgEx3").removeClass("active"); }); $(".button2").click(function() { $(".imgEx1").removeClass("active"); $(".imgEx2").addClass("active"); $(".imgEx3").removeClass("active"); }); $(".button3").click(function() { $(".imgEx1").removeClass("active"); $(".imgEx2").removeClass("active"); $(".imgEx3").addClass("active"); }); }); 
 .active { color: blue; } span { border: 1px solid black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="imgEx1 active">Лак</p> <p class="imgEx2">Ваниль</p> <p class="imgEx3">Мёд</p> <p> <span class="button1">Лак</span> <span class="button2">Ваниль</span> <span class="button3">Мёд</span> </p>

  • Isn't it written correctly? - Dmytryk
  • No, well, he is correct, in the sense of working)), but I have a 99% feeling that the guy is smarter, would have made it (this script) more compact)) - jujujus
  • 2
    @jujujus, add your html markup to the question. - Pyramidhead
  • +1 based on html we can conclude - newProgrammer
  • Now you spawn classes and make the script a little universal. And if you have twenty buttons? And if a hundred? Make one handler for a general class, some .toggle_active_button and specify a specific picture via the data-* attribute and create a general class for your imgEx , so as not to sort through them all manually. - Alex Krass

2 answers 2

As an option

 jQuery(function($) { $(".button").click(function() { // Убираем класс со всех $(".imgEx").removeClass("active") // Выставляем нужному .filter(".imgEx" + $(this).data("idx")).addClass("active"); }); }); 
 .active { color: blue; } span { border: 1px solid black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="imgEx imgEx1 active">Лак</p> <p class="imgEx imgEx2">Ваниль</p> <p class="imgEx imgEx3">Мёд</p> <p> <span class="button" data-idx="1">Лак</span> <span class="button" data-idx="2">Ваниль</span> <span class="button" data-idx="3">Мёд</span> </p>

  • Thank! Cool laid out) - jujujus

I understand it is necessary to reduce the code.

Will work with the "correct" markup.

 $('.button').click(function() { $('.img').eq($(this).index('.button')).addClass('active') .siblings('.img').removeClass('active') }) 
 .active { color: blue; } span { border: 1px solid black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgs"> <p class="img imgEx1 active">Лак</p> <p class="img imgEx2">Ваниль</p> <p class="img imgEx3">Мёд</p> </div> <div class="buttons"> <span class="button button1">Лак</span> <span class="button button2">Ваниль</span> <span class="button button3">Мёд</span> </div>

  • Step left, step right in the markup - shot on the spot. - Alex Krass
  • @AlexKrass and what do you suggest? On the date, the parameters to write everything or OOP, ugh, ugh? - DaemonHK
  • Author, I would add unbind ("click") - DaemonHK
  • @DaemonHK Yes, if you write not for a specific markup, then on the date parameters and classes. Otherwise, the coder can hover, fixing the markup in the necessary blocks. - Alex Krass
  • one
    @DaemonHK .unbind () == deprecated in new versions replaced by .off () and to use it you need to run the event via .on () and the example given does not send requests to the server, I think the browser, and in this case extra characters will appear)) - Asan Abildin