jquery - Showing and hiding divs on click -
i have nav bar 3 menu points. called "home" "bildformate" , "kontakt". on load div class "home" displayed below navbar, displaying text etc. other 2 divs hidden. when click on "bildformate" want home div disappear , div class "formate" should visible. same goes div "kontakt". lets focus on "bildformate" div first. code right now:
<script> $(document).ready(function(){ $('.bildformate').click(function() { // show , hide $('.home').hide(); $('.formate').show(); }); });
so when click "bildformate" works split of second. can see "home" div becoming invisible , "formate" div flahes second. looks before. why?
css of 3 divs:
.home { margin: 0 auto; margin-top: 30px; width: 60%; padding: 0px; background-color:#ededed; color: #787878; border-radius: 5px; } .formate { margin: 0 auto; margin-top: 30px; width: 60%; padding: 0px; background-color:#ededed; color: #787878; border-radius: 5px; } .kontakt { margin: 0 auto; margin-top: 30px; width: 60%; padding: 0px; background-color:#ededed; color: #787878; border-radius: 5px; } .content { margin: 40px; padding: 20px; }
html code:
<body> <nav class="nav-wrapper"> <ul> <li><a href="bildformate.html">home</a></li> <li class="bildformate"><a href="">bildformate</a></li> <li><a href="">kontakt</a></li> </ul> </nav> <div class="home"> <div class="content"> <p>willkommen</p> </div> </div> <div class="formate"> <div class="content"> <p>bildformate</p> </div> </div> <div class="kontakt"> <div class="content"> <p>kontakt</p> </div> </div>
ok found problem links, <a..
tags have href
attribute set ''
causes page reload you.
if change them <a href="#" ...
instead wont reload. reset/flash thing speak of result of page reloading , bringing original state.
for testing wrote line
$("a").attr("href", "#");
however should manually go change href attributes # value.
Comments
Post a Comment