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

Every line of 'react add active class on click' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
46function 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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

83setActiveClass() {
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}
18handleClick({ props }: any) {
19 if (this.state.currentItem) {
20 this.state.currentItem.onDeactive();
21 }
22
23 props.onActive();
24 this.setState({ currentItem: props });
25}
33public 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}
143getClassName(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}
18function 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}
85function toggleClass(element, active) {
86 if ($(element).hasClass(active)) {
87 $(element).removeClass(active);
88 } else {
89 $(element).addClass(active);
90 }
91}
38protected get activeCls() {
39 return activeClass(this.href || null, this.activeHref, this.exact);
40}
30@HostListener('click', ['$event']) Click() {
31 this.isClicked = true;
32}

Related snippets