Ausblenden/Anzeigen von Div.

Ich möchte, dass (".aboutPage") ein- und ausgeblendet wird, wenn (".about") angeklickt wird. Beim Start wird das Div angezeigt. Wie verbinde ich das hide() damit, da es beim Laden der Seite nicht ausgeblendet wird. Bitte helfen Sie. Ich bin mir bewusst, dass das Div nicht Größe oder nichts, ich werde das tun, nachdem ich alle drei arbeiten.Ausblenden/Anzeigen von Div.

.aboutPage { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <h1 class="title">Name Goes Here</h1> 
 
    <br> 
 
    <div class="menu"> 
 
    <h1 class="about">About Me</h1> 
 
    <h1 class="projects">Projects</h1> 
 
    <h1>Contact Me</h1> 
 
    </div> 
 
    <div class="aboutPage"> Here it Is</div> 
 
</div>

Quelle

2017-01-29 ZeroCalm

$ (document) .ready (function() { $ (".about"). click (function() { $ (".überSeite") .togg le(); }); }); – ZeroCalm

Sorry vergaß meine JS im ursprünglichen Beitrag – ZeroCalm

werfen Sie einen Blick auf meine Antwort. –

Sie haben toggle Methode, um die angepassten Elemente angezeigt werden verwenden oder zu verbergen.

Sie müssen auch bind ein click Event-Handler zu .about Element. $('.aboutPage').hide();

oder mit css:

div wenn Seite geladen auszublenden

.aboutPage{ 
    display:none; 
}

$('.aboutPage').hide(); 
 
$('.about').click(function(){ 
 
    $('.aboutPage').toggle(); 
 
});

.aboutPage{ 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <div class="container"> 
 
     <h1 class="title">Name Goes Here</h1> 
 
     <br> 
 
     <div class="menu"> 
 
      <h1 class="about">About Me</h1> 
 
      <h1 class="projects">Projects</h1> 
 
      <h1>Contact Me</h1> 
 
     </div> 
 
     <div class="aboutPage"> Here it Is</div> 
 
     </div> 
 
    </body>

Quelle

2017-01-29 20:57:20

Sie sicher "können" verwenden JQuery, dies zu tun, aber es ist nicht nötig.

Siehe Anmerkungen inline zur Erläuterung. (Anmerkung: ich die letzten 3 h1 Elemente p Elemente geändert haben, nur damit sie in den Code-Schnipsel-Fenster passt hier):

// Get references to DOM objects needed to work the problem: 
 
var a = document.querySelector(".about"); 
 
var ap = document.querySelector(".aboutPage"); 
 

 
// Add a "click" event handler to the .about element 
 
a.addEventListener("click", function(){ 
 
    
 
    // If .aboutPage is hidden, show it - otherwise hide it. 
 
    // Do this by adding or removing the .hide class. 
 
    if(ap.classList.contains("hide")){ 
 
    ap.classList.remove("hide"); 
 
    } else { 
 
    ap.classList.add("hide"); 
 
    } 
 
});

.aboutPage{ 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
} 
 

 
.hide { display:none; }

<div class="container"> 
 
     <h1 class="title">Name Goes Here</h1> 
 
     <div class="menu"> 
 
      <p class="about">About Me</p> 
 
      <p class="projects">Projects</p> 
 
      <p>Contact Me</p> 
 
     </div> 
 
     <div class="aboutPage hide"> Here it Is</div> 
 
</div>

Quelle

2017-01-29 20:58:20

Sie können jQuery verwenden, um eine Klasse umzuschalten, die das Element ausblendet.

$('.about').on('click',function() { 
 
    $('.aboutPage').toggleClass('hide'); 
 
})

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h1 class="title">Name Goes Here</h1> 
 
    <br> 
 
    <div class="menu"> 
 
    <h1 class="about">About Me</h1> 
 
    <h1 class="projects">Projects</h1> 
 
    <h1>Contact Me</h1> 
 
    </div> 
 
    <div class="aboutPage"> Here it Is</div> 
 
</div>

Und hier ist, wie Sie es in Vanille JS tun würde

document.getElementsByClassName('about')[0].addEventListener('click',function() { 
 
    document.getElementsByClassName('aboutPage')[0].classList.toggle('hide'); 
 
})

.hide { 
 
    display: none; 
 
}

<div class="container"> 
 
    <h1 class="title">Name Goes Here</h1> 
 
    <br> 
 
    <div class="menu"> 
 
    <h1 class="about">About Me</h1> 
 
    <h1 class="projects">Projects</h1> 
 
    <h1>Contact Me</h1> 
 
    </div> 
 
    <div class="aboutPage"> Here it Is</div> 
 
</div>

Quelle

2017-01-29 20:58:21

Ausblenden/Anzeigen von Div.

Antwort

Verwandte Themen