iiiypuk/codrops-scribbler
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix a minor click event issue on the tab pane

Browse Source
This commit is contained in:
Amie Chen 2018-01-12 19:01:36 -08:00
parent a332e77857
commit cebda05598
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -35,7 +35,7 @@
<div class="installation"> <div class="installation">
<h3 class="section__title">Installation</h3> <h3 class="section__title">Installation</h3>
<div class="tab__container"> <div class="tab__container">
<ul> <ul class="tab__menu">
<li class="tab active" data-tab="mac">mac</li> <li class="tab active" data-tab="mac">mac</li>
<li class="tab" data-tab="linux">linux</li> <li class="tab" data-tab="linux">linux</li>
<li class="tab" data-tab="win">win</li> <li class="tab" data-tab="win">win</li>

1
scribbler-global.css
View File

@ -59,6 +59,7 @@ hr {
margin: 0; margin: 0;
right: 1rem; right: 1rem;
top: -2rem; top: -2rem;
padding-left: 0;
} }
.tab__container .code { .tab__container .code {

8
scribbler.js
View File

@ -41,12 +41,12 @@ window.addEventListener("load", function() {
// bind click event to each tab container // bind click event to each tab container
for (var i = 0; i < tabContainers.length; i++) { for (var i = 0; i < tabContainers.length; i++) {
tabContainers[i].addEventListener("click", tabClick); get('.tab__menu', tabContainers[i]).addEventListener("click", tabClick);
} }
// each click event is scoped to the tab_container // each click event is scoped to the tab_container
function tabClick (event) { function tabClick (event) {
var scope = event.currentTarget; var scope = event.currentTarget.parentNode;
var clickedTab = event.target; var clickedTab = event.target;
var tabs = getAll('.tab', scope); var tabs = getAll('.tab', scope);
var panes = getAll('.tab__pane', scope); var panes = getAll('.tab__pane', scope);
@ -128,8 +128,8 @@ window.addEventListener('scroll', function () {
}); });
// responsive navigation // responsive navigation
var topNav = document.querySelector('.menu'); var topNav = get('.menu');
var icon = document.querySelector('.toggle'); var icon = get('.toggle');
window.addEventListener('load', function(){ window.addEventListener('load', function(){
function showNav() { function showNav() {