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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -