Forum PHP.pl > [CSS][HTML][JavaScript]Wysuwane zakładki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML][JavaScript]Wysuwane zakładki

michuwsh

21.03.2019, 14:00:19

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:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
    <head>
        <title>To będzie lista rozwijalna</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="list.css">
    </head>
    <body>
        <div class="container">
            <ul>
                <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>
            </ul>
            <div class="box">
                <div id="attachment1" class="act">
                    <h1>Załącznik 1</h1>
                    <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>
                </div>
                <div id="attachment2">
                    <h1>Załącznik 2</h1>
                    <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>
                </div>
                <div id="attachment3">
                    <h1>Załącznik 3</h1>
                    <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>
                </div>
            </div>
        </div>
    <script>
        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("#", ""));
            }); 
        }
 
    </script>
    </body>
</html>
[HTML] pobierz, plaintext

CSS

[HTML] pobierz, plaintext 
 
.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;
}
[HTML] pobierz, plaintext

trueblue

21.03.2019, 15:32:38

Jeśli chcesz pobrać wartość hash z linku, to:
1. Sprawdź jaką wartość ma this i poczytaj o funkcji strzałkowej.
2. Hash dla linku nie jest w location - element nie ma takiej właściwości.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.