How to code Chrome's devtools tabs bar in HTML, CSS, JavaScript | Web Dev Quickie #1

#shorts #javascript #css
How to code Chrome's dev tools tabs bar in HTML, CSS, JavaScript within 60 seconds in the first (of hopefully many) web coding quickies.

[nicksen]

Thank you, very nice tutorial but I found a bug that you may want to consider. The bug is that the ul element can be the event.target and that causes the underline to be under the whole ul instead of just the intended li. The fix is very simple. Here it is:

// Avoid targetting the ul.
if(listItem == list){ return; }

Also, if you wanted to have a li initially selected you can use this:
// Select the first nav element.
Event("click", { bubbles: true }));

Thanks again for the great tutorials!