• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Link per Java Script aktiviert lassen

C

Corraggiouno

Mitglied
hi zusammen,

ich würde gerne, dass wenn ich auf einen link klicke, dass dieser mit einem Hacken aktiviert bleibt.
Also so eine Art checklist
Mein HTML und CSS dazu lautet:
Code: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
    <title>Stundenverlauf</title>
   <style>
   
    html, body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
     }
   
    html {
    display: table;
    }
   
    body{
   
    }
   
    body {
    display: table-cell;
    vertical-align: middle;
    font-family: "Handlee";
    font-weight: 100;
    font-size: 100%;
    color:#ffffff;
    }
   
    .main {
    max-width: 60rem;
    margin: 0 auto;
    border: 1px solid;
    border-radius 3px;
    padding: 2rem;
    background-color: #0652a8;
    }
   
    h1 {
    text-align: center;
    }
   
    a, a:hover, a:focus {
    color: #ffffff;
    text-decoration: none;
     }
   
    ul{
      font-size: 2rem;
    }
   
    li {
    padding: 0.5rem 0;
    list-style-type: none;
    }
   
    .uebergang a {
     padding-left:0;
     -webkit-transition: all 1s ease;
     transition: all 1s ease;
    }
   
    .uebergang a:hover {
    padding-left: 10px;
    }
   
    .uebergang a:focus:after {
    content: ' checked';
    }
   
   </style>
  </head>
  <body>
    <div class="main">
   <h1>Erstellung und Gestaltung einer Website mit HTML und CSS</h1>
   <ul class="uebergang">
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
   </ul>
   </div>
  </body>
</html>
Wenn ich aktuell die Links anklicke, dann wird das Wort "checked" sobald ich einen weiteren Link anklicke, diesem zugeteilt und bei dem zuvor angeklickten Link erlischt das Wort "checked".
Hat da jemand einen Tipp für mich?
Lässt sich dies auch mit CSS lösen oder benötige ich da javascript?
 
Werbung:
Ja genau. Da würde ich schon ein Symbol in Form eines font icons nehmen. Aber wie realisiere ich es technisch. Ich möchte, wenn ich auf den ersten Link klicke. Das dieser gecheckd ist und gechecked bleibt, wenn ich auf den zweiten link klicke.
 
ja das stimmt schon. ich möchte einfach ne Liste erstellen, wo ich sozusagen die Punkte die schon behandelt wurden, abgehackt werden. Das ist der Sinn dahinter und das ganze eben in html, css und ggf javascript, wenn nötig.
Für einen TIpp wäre ich sehr dankbar
 
Werbung:
ich poste dir nochmal den ganzen code. bei mir ist nichts klickbar. Der check (font icon) wird einfach ohne klick angezeigt
Code: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
   <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <title>Stundenverlauf</title>
   <style>
   
    html, body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
     }
   
    html {
    display: table;
    }
   
    body{
   
    }
   
    body {
    display: table-cell;
    vertical-align: middle;
    font-family: "Handlee";
    font-weight: 100;
    font-size: 100%;
    color:#ffffff;
    }
   
    .main {
    max-width: 60rem;
    margin: 0 auto;
    border: 1px solid;
    border-radius 3px;
    padding: 2rem;
    background-color: #0652a8;
    }
   
    h1 {
    text-align: center;
    }
   
    a, a:hover, a:focus {
    color: #ffffff;
    text-decoration: none;
     }
   
    ul{
      font-size: 2rem;
    }
   
    li {
    padding: 0.5rem 0;
    list-style-type: none;
    }
   
    input[id^='cbitem'] {
            display: none;
        }
        input[id^='cbitem']+label i {
            visibility: hidden;
        }
        input[id^='cbitem']:checked+label i {
            visibility: visible;
        }
   
    </style>
  </head>
  <body>
    <div class="main">
   <h1>Erstellung und Gestaltung einer Website mit HTML und CSS</h1>
   <ul>
    <li><label for="cbitem1"><i class="fa fa-check" aria-hidden="true"></i>Widerholung von HTML-Elementen und CSS Typselektoren</label><input type="checkbox" id="cbitem1"</li>
    <li><label for="cbitem1"><i class="fa fa-check" aria-hidden="true"></i>Widerholung von HTML-Elementen und CSS Typselektoren</label><input type="checkbox" id="cbitem1"</li>
    <li><label for="cbitem1">Widerholung von HTML-Elementen und CSS Typselektoren</label><input type="checkbox" id="cbitem1"</li>
    <li><label for="cbitem1">Widerholung von HTML-Elementen und CSS Typselektoren</label><input type="checkbox" id="cbitem1"</li>
    <!--<li>Wir erstellen und gestalten uns eine Website</li>
    <li>Präsentation</li>
    <li>Hallo</li>-->
   </ul>
   </div>
  </body>
</html>
 
deine inputs haben kein schliesenden tag also das hier ">" fehlt da

du hast auch 4 mal die gleiche id das geht auch nicht gut
 
Werbung:
Besten dank dir. funktioniert. TOP.
Ich denke mal das das + einfach das input und label element miteinander verbindet, oder?
aber wieso kann ich zwischen label und svg kein plus setzen?
 
Werbung:
Besten Dank. Aber direkte Nachbar von label wäre ja das svg element.
Also wenn ich den code im inspector von firefox betrachte
Dennoch würde das plus nicht funktionieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben