Commit cd9d380

committed

Classes

1 parent 81d7565 commit cd9d380Copy full SHA for cd9d380

File tree

+25

-2

lines changed

+25

-2

lines changed

Lines changed: 17 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -5,10 +5,25 @@`
`5`	`5`	`<meta http-equiv="X-UA-Compatible" content="IE=edge" />`
`6`	`6`	`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
`7`	`7`	`<title>DOM</title>`
	`8`	`+ <style>`
	`9`	`+ .menu-item {`
	`10`	`+ background-color: black;`
	`11`	`+ color: white;`
	`12`	`+ }`
	`13`	`+`
	`14`	`+ .menu-item.active {`
	`15`	`+ background-color: white;`
	`16`	`+ color: black;`
	`17`	`+ }`
	`18`	`+ </style>`
`8`	`19`	`</head>`
`9`	`20`	`<body>`
`10`		`- <h1 class="heading1">Hello, World!</h1>`
`11`		`- <h2 class="heading1">Test 1</h2>`
	`21`	`+ <ul>`
	`22`	`+ <li onclick="menuClicked(this)" class="menu-item">Menu 1</li>`
	`23`	`+ <li onclick="menuClicked(this)" class="menu-item active">Menu 2</li>`
	`24`	`+ <li onclick="menuClicked(this)" class="menu-item">Menu 3</li>`
	`25`	`+ <li onclick="menuClicked(this)" class="menu-item">Menu 4</li>`
	`26`	`+ </ul>`
`12`	`27`	`<script src="script.js"></script>`
`13`	`28`	`</body>`
`14`	`29`	`</html>`

Lines changed: 8 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1 +1,9 @@`
	`1`	`+const menuClicked = (currEl) => {`
	`2`	`+ const menuItems = document.getElementsByClassName("menu-item");`
`1`	`3`
	`4`	`+ for (let i = 0; i < menuItems.length; i++) {`
	`5`	`+ menuItems[i].classList.remove("active");`
	`6`	`+ }`
	`7`	`+`
	`8`	`+ currEl.classList.add("active");`
	`9`	`+};`

Comments

(0)