Witam koledzy i koleżanki,
Uczę się od kilku dni javascript-u niestety już na drugim zadaniu poległem. A mianowicie wymyśliłem sobie że zrobię wysuwane zakładki niestety mam problem bo gdy dodaje zdarzenie do pobranych elementów za pomocą addEventListern nie wszystko dobrze działa. Problem polega na tym że gdy wywołuje sobie console.log to nie jest pobierane przez moje zdarzenie poprawna wartość
Tak to wygląda:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="list.css"> <li><a class="active" href="#attachment1">Załącznik 1
</a></li> <li><a href="#attachment2">Załącznik 2
</a></li> <li><a href="#attachment3">Załącznik 3
</a></li> <div id="attachment1" class="act"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed odio libero quisquam architecto culpa totam, blanditiis aut vel! Accusantium eum accusamus aliquam fugit molestiae numquam reiciendis, eveniet facilis quidem impedit.
</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia recusandae numquam eaque officiis repudiandae beatae veniam. Laudantium cupiditate maiores dicta suscipit velit vitae quidem quam dolorum assumenda. Tempora, amet? Reprehenderit.
</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus illo pariatur enim voluptas! Amet soluta in molestias fugit aperiam alias, autem, sapiente suscipit nihil consectetur maxime pariatur dolorum culpa.
</p> const link = document.getElementsByTagName('a');
for(i=0; i< link.length; i++) {
link[i].addEventListener("click", () => {
const tmp = this.location.hash;
console.log(tmp.replace("#", ""));
});
}
CSS
.container {
width: 80%;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul > li {
display: inline-block;
}
ul > li > a {
text-decoration: none;
font-size: 1.5em;
color: #FFF;
background: grey;
padding: 15px;
transition: all .3s;
}
ul > li > a:hover {
background: #000;
color: #FFF;
}
.active {
background: #FFF;
color: #000;
border: 1px solid #000;
border-bottom: none;
}
.box {
margin-top: 13px;
border: 1px solid #000;
}
.box > div {
display: none;
}
.box > .act {
display: block;
}
[CSS][HTML][JavaScript]Wysuwane zakładki
21.03.2019, 14:00:19
michuwsh [CSS][HTML][JavaScript]Wysuwane zakładki 21.03.2019, 14:00:19 
