Menu
In the following code, the program actions work fine.
The question is why does the “mark” background color work as expected
when the “.tabBtns li { ” background:lime is removed (line 17 of code)
but does not work correctly when the same setting is included?
Is it my mis-understanding of the basic CSS or is this a CSS priority condition I’m missing?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width-device-width,initial-scale=1.0, user-scalable=yes”/>
<title> Test Page Mark </title>
<style>
/* * { margin: 0; padding: 0; box-sizing: border-box; } /* */
.hide { display: none; }
.mark { background: orange; }
ul { list-style-type: none; cursor: pointer; }
.tabBtns li { display: inline-block; }
.tabBtns li { margin: 0.3em; padding: 0.2em; /* background: lime; /* */
border: 1px solid black;
width: 10em; font-size: 1.25em; }
.tabBtns li:hover { background: yellow; }
</style>
</head>
<body>
<ul class=”tabBtns”>
<li class=”mbtn”> Stack </li>
<li class=”mbtn”> Queue </li>
<li class=”mbtn”> Sets </li>
<li class=”mbtn”> Hash </li>
</ul>
<div class=”tabs”>
<div class=”hide”> Stack </div>
<div class=”hide”> Queue </div>
<div class=”hide”> Sets </div>
<div class=”hide”> Hash </div>
</div>
<hr>
<ol class=”otherList”>
<li> A </li>
<li> B </li>
<li> C </li>
<li> D </li>
</ol>
<script>
console.clear();
function init() {
const tBtns = document.querySelectorAll(‘.tabBtns li’);
// length of tTabs MUST EQUAL tBtns (indexed order)
const tTabs = document.querySelectorAll(‘.tabs div’);
tBtns.forEach( (el,ndx) => {
el.addEventListener( // substitute your own Fat-Arrow => function actions
‘click’, () => { el.classList.toggle(‘mark’); let tab = tTabs[ndx].classList;
(el.classList.contains(‘mark’)) ? tab.remove(‘hide’)
: tab.add(‘hide’);
} // console.log(ndx); } // optional console.log message
)
} );
} init();
</script>
</body>
</html>
I expected that the lime background color would be replaced by the
‘mark’ background color (orange) when the link of the list is selected.