10 examples of 'react add active class on click' in JavaScript

46
function addActiveClassToButton() {
47
    // on right arrow click, change active class of buttons to the next one
48
    var endMargin = firstSlide.style.marginLeft;
49
    var absoluteNum = Math.abs(endMargin.slice(0, endMargin.length - 1));
50
    var num = 0;
51
    if (absoluteNum === 0) {
52
        num = 0;
53
    } else {
54
        num = absoluteNum / 100;
55
    }
56
    document.querySelector('.btn-active').classList.remove('btn-active');
57
    buttonsContainer.childNodes[num].classList.add('btn-active');
58
}

83
setActiveClass() {
84
  const items = this.menu.querySelectorAll('li')
85
86
  items.forEach((item) => {
87
    item.classList.remove('active')
88
  })
89
90
  if (this.index != null) {
91
    items[this.index].classList.add('active')
92
  }
93
}

18
handleClick({ props }: any) {
19
  if (this.state.currentItem) {
20
    this.state.currentItem.onDeactive();
21
  }
22
23
  props.onActive();
24
  this.setState({ currentItem: props });
25
}

33
public onClick(targetElement: Element) {
34
    const menuParent = document.querySelectorAll("ul.left-menu")[0];
35
    const isInMenu = menuParent.contains(targetElement);
36
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
37
    const collapseObject = this._elementRef.nativeElement.querySelectorAll("a")[0];
38
    const collapseObjectClicked = collapseObject.contains(targetElement);
39
    if (!clickedInside && isInMenu) {
40
        this.clickOutside.emit(null);
41
        this.renderer.removeClass(this._elementRef.nativeElement, "active");
42
    } else if (clickedInside && isInMenu) {
43
        const classList = this._elementRef.nativeElement.classList.value;
44
        if (classList.includes("active") && collapseObjectClicked) {
45
            this.renderer.removeClass(this._elementRef.nativeElement, "active");
46
        } else {
47
            this.renderer.addClass(this._elementRef.nativeElement, "active");
48
        }
49
    }
50
}

143
getClassName(active) {
144
	return classNames(this.props.className, 'slds-button', {
145
		'slds-button_neutral':
146
			this.props.variant !== 'icon' && this.props.variant !== 'icon-filled',
147
		'slds-button_inverse': this.props.variant === 'inverse',
148
		'slds-not-selected': !active,
149
		'slds-is-selected': active,
150
		'slds-max-small-button_stretch': this.props.responsive,
151
		'slds-button_icon-border': this.props.variant === 'icon',
152
		'slds-button_icon-border-filled': this.props.variant === 'icon-filled',
153
	});
154
}

18
function tabActive() {
19
  let $tabs = document.querySelectorAll('.js-header-menu li a')
20
  let path = window.location.pathname
21
22
  for (var i = 0, len = $tabs.length; i < len; i++) {
23
    let $tab = $tabs[i]
24
    if (isPathMatch(path, $tab.getAttribute('href'))) {
25
      addClass($tab, 'active')
26
    }
27
  }
28
}

22
_clickClass(x) {
23
  document.querySelector(`.${x}`).click();
24
}

85
function toggleClass(element, active) {
86
    if ($(element).hasClass(active)) {
87
        $(element).removeClass(active);
88
    } else {
89
        $(element).addClass(active);
90
    }
91
}

38
protected get activeCls() {
39
    return activeClass(this.href || null, this.activeHref, this.exact);
40
}

30
@HostListener('click', ['$event']) Click() {
31
  this.isClicked = true;
32
}