There are two menus in different blocks on the page. The menu has 2 buttons.

Is it possible that when you click on the buttons in the first menu, everything is synchronously switched in the second menu from the active to the inactive class (and vice versa).

Trying to be wise (but to no avail):

$('.a-1').on('click', function(e){ e.preventDefault(); var $this = $(this), b2 = $('.a-2'); if(!$this.hasClass('active')){ $this.addClass('active') .siblings().removeClass('active'); b2.removeClass('active'); }else { $this.removeClass('active'); } }); $('.a-2').on('click', function(e){ e.preventDefault(); var $this = $(this), b1 = $('.a-1'); if(!$this.hasClass('active')){ $this.addClass('active') .siblings().removeClass('active'); b1.removeClass('active'); }else { $this.removeClass('active'); } }); 
 .active { color: red; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <menu> <a href="#" class="a a-1 active">1</a> <a href="#" class="a a-2">2</a> </menu> <menu> <a href="#" class="a a-1 active">1</a> <a href="#" class="a a-2">2</a> </menu>

    3 answers 3

     $('.a').on('click', function(e) { $(".a").removeClass("active"); var data = $(this).attr("data-id"); $("[data-id='" + data + "']").addClass("active"); }); 
     .active { color: red; } 
     <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <menu> <button data-id="a-1" class="a active">1</button> <button data-id="a-2" class="a">2</button> <button data-id="a-3" class="a">3</button> </menu> <menu> <button data-id="a-1" class="a active">1</button> <button data-id="a-2" class="a">2</button> <button data-id="a-3" class="a">3</button> </menu>

    • thank you so much !!!! - HamSter

    If you have the menu with the same content, then do the following:

    • initialize the links in the menu -> get an array of links
    • by event we get event from which you can use event.target to determine which element is currently pressed
    • determine the position of the element in the array of links of one menu
    • Well, we perform the necessary actions inside the second menu (for example, add / remove the class of the active link, etc.)

    In the code now unfortunately there is no possibility to write

      Such a task may arise when independent data binding is required for elements on the page. This example demonstrates how this can be implemented using mvc:

       class MenuModel { constructor() { this._obs = []; this._selected = -1; this.selected = 0; } select(num) { this.selected = num; } set selected(value) { if(value != this._selected) { this._selected = value; this.dispatchEvent(new Event("selectChange")); } } get selected() { return this._selected; } addEventListener(type, node) { this._obs.push({type, node}); } removeEventListener(type, node) { this._obs = this._obs.filter(obs=>obs.type == type && obs.node == node); } dispatchEvent(event) { let obs = this._obs.filter(obs => obs.type == event.type); obs.forEach(obs=>{ let node = obs.node; if(typeof node == "function") { node.call(this, event); } else if(node.handleEvent) { node.handleEvent(event); } }); } } class ButtonView { constructor(target, index) { this.target = target; target.addEventListener("click", this); this.index = index; } bind(model) { if(this.model != model) { if(this.model) this.model.removeEventListener("selectChange", this); this.model = model; if(model) { model.addEventListener("selectChange", this); this.refresh(); } } } refresh() { this.target.classList.toggle("active", this.model.selected == this.index); } handleEvent(event) { if(event.type == "selectChange") this.refresh(); else if(event.type == "click") { if(this.model) this.model.select(this.index); } } } ButtonView.create = (target, index) => new ButtonView(target, index); window.addEventListener("load", ()=>{ let menu1 = document.body.querySelectorAll("menu")[0]; let menu2 = document.body.querySelectorAll("menu")[1]; let list1view = [].slice.call(menu1.querySelectorAll("button")).map(ButtonView.create); let list2view = [].slice.call(menu2.querySelectorAll("button")).map(ButtonView.create); var menu = new MenuModel(); list1view.forEach(elm=>elm.bind(menu)); list2view.forEach(elm=>elm.bind(menu)); });

      Initially, a rather bulky bike is obtained, but if programmed in the same style, then the redundancy in the code will be less due to generalization. One of the advantages of this approach is that you can now influence the elements of the list without referring to the dom element directly, but simply by changing the model, for example, if you now do this:

       menu.select(2);

      then the changes will be automatically applied to the view.

      Understanding the principle of operation of this code helps to easily switch to any modern mvc framework.