Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML][JavaScript]Wysuwane zakładki
michuwsh
post 21.03.2019, 14:00:19
Post #1





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>To będzie lista rozwijalna</title>
  5.         <meta charset="UTF-8">
  6.         <link rel="stylesheet" type="text/css" href="list.css">
  7.     </head>
  8.     <body>
  9.         <div class="container">
  10.             <ul>
  11.                 <li><a class="active" href="#attachment1">Załącznik 1</a></li>
  12.                 <li><a href="#attachment2">Załącznik 2</a></li>
  13.                 <li><a href="#attachment3">Załącznik 3</a></li>
  14.             </ul>
  15.             <div class="box">
  16.                 <div id="attachment1" class="act">
  17.                     <h1>Załącznik 1</h1>
  18.                     <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>
  19.                 </div>
  20.                 <div id="attachment2">
  21.                     <h1>Załącznik 2</h1>
  22.                     <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>
  23.                 </div>
  24.                 <div id="attachment3">
  25.                     <h1>Załącznik 3</h1>
  26.                     <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>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     <script>
  31.         const link = document.getElementsByTagName('a');
  32.         for(i=0; i< link.length; i++) {
  33.             link[i].addEventListener("click", () => {
  34.                 const tmp = this.location.hash;
  35.                 console.log(tmp.replace("#", ""));
  36.             }); 
  37.         }
  38.  
  39.     </script>
  40.     </body>
  41. </html>
[HTML] pobierz, plaintext

CSS
[HTML] pobierz, plaintext 
  1.  
  2. .container {
  3.     width: 80%;
  4.     margin: 0 auto;
  5. }
  6. ul {
  7.     list-style-type: none;
  8.     margin: 0;
  9.     padding: 0;
  10. }
  11. ul > li {
  12.     display: inline-block;
  13.  
  14. }
  15. ul > li > a {
  16.     text-decoration: none;
  17.     font-size: 1.5em;
  18.     color: #FFF;
  19.     background: grey;
  20.     padding: 15px;
  21.     transition: all .3s;
  22. }
  23. ul > li > a:hover {
  24.     background: #000;
  25.     color: #FFF;
  26. }
  27. .active {
  28.     background: #FFF;
  29.     color: #000;
  30.     border: 1px solid #000;
  31.     border-bottom: none;
  32. }
  33. .box {
  34.     margin-top: 13px;
  35.     border: 1px solid #000;
  36. }
  37. .box > div {
  38.     display: none;
  39. }
  40. .box > .act {
  41.     display: block;
  42. }
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
trueblue
post 21.03.2019, 15:32:38
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.04.2024 - 12:49
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn