javascript - entire page moves up when i click menu bottom tag -
the following code works fine
error
- when click last tag in menu entire page move top how resolve error
html
<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8" /> <title>blueprint: vertical icon menu</title> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/leftmenu.css" /> <link rel="stylesheet" type="text/css" href="flaticon.css" /> <style> body {position: relative;font-family: 'lato', calibri, arial, sans-serif; color: #47a3da;} body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;} {text-decoration: none;} a:hover {color: #000;} #header{height: 90px;width: 100%;background-color: #b9f5bb;} #footer{height: 50px;width: 100%;background-color: #fdd5cb;} .dis123{width:75%;float:left; height: 500px;background-color:#dceee3; text-align: left; } .postleftmen{width:25%;float:left;color:#f0f0f0;} div.subcte456{color: red;} </style> </head> <body> <div id="header"> head </div> <div class="postleftmen"> <ul class="cbp-vimenu"> <li><a href="#" >select category</a></li> <li><a href="#" class="flaticon-smart" onclick="mob();">mobile</a></li> <li><a href="#" class="flaticon-pc6" onclick="ele();">electronics & computer</a></li> <li><a href="#" class="flaticon-car95" onclick="veh();">vehicle</a></li> <li><a href="#" class="flaticon-livingroom6" onclick="hme();">home & furniture</a></li> <li><a href="#" class="flaticon-dog50" onclick="pet();">pets</a></li> <li><a href="#" class="flaticon-cd" onclick="bok();">books, cd & hobbies</a></li> <li><a href="#" class="flaticon-black276" onclick="clo();">clothing & accessories</a></li> <li><a href="#" class="flaticon-baby23" onclick="kid();">kids & baby</a></li> <li><a href="#" class="flaticon-bicycle14" onclick="spo();">sport & health</a></li> <li><a href="#" class="flaticon-tools6" onclick="ser();">service</a></li> <li><a href="#" class="flaticon-businessman221" onclick="job();">jobs</a></li> <li><a href="#" class="flaticon-house111" onclick="rel();">real estate</a></li> </ul> </div> <div class="dis123" style="text-transform: uppercase;"> <div class="subcte456" style="position:fixed;width:75%;height:60%;background-color: #fdd5cb;margin:0 auto;"> sanoj <div id="mobi" style="display:none;z-index:99;" class="answer_list" ><a href="#">mobile phones</a></div> <div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div> <div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div> <div id="home" style="display:none;z-index:99;" class="answer_list" >home</div> <div id="pets" style="display:none;z-index:99;" class="answer_list" >pets</div> <div id="book" style="display:none;z-index:99;" class="answer_list" >books</div> <div id="clot" style="display:none;z-index:99;" class="answer_list" >clothing</div> <div id="kids" style="display:none;z-index:99;" class="answer_list" >kids</div> <div id="spor" style="display:none;z-index:99;" class="answer_list" >sport</div> <div id="serv" style="display:none;z-index:99;" class="answer_list" >service</div> <div id="jobs" style="display:none;z-index:99;" class="answer_list" >jobs</div> <div id="real" style="display:none;z-index:99;" class="answer_list" >real estate</div> </div></div> <div style="clear:both"> </div> <div id="footer"> footer </div> <script> function mob() { hidemenus(); document.getelementbyid('mobi').style.display = "block"; } function ele() { hidemenus(); document.getelementbyid('elec').style.display = "block"; } function veh() { hidemenus(); document.getelementbyid('vehi').style.display = "block"; } function hme() { hidemenus(); document.getelementbyid('home').style.display = "block"; } function pet() { hidemenus(); document.getelementbyid('pets').style.display = "block"; } function bok() { hidemenus(); document.getelementbyid('book').style.display = "block"; } function clo() { hidemenus(); document.getelementbyid('clot').style.display = "block"; } function kid() { hidemenus(); document.getelementbyid('kids').style.display = "block"; } function spo() { hidemenus(); document.getelementbyid('spor').style.display = "block"; } function ser() { hidemenus(); document.getelementbyid('serv').style.display = "block"; } function job() { hidemenus(); document.getelementbyid('jobs').style.display = "block"; } function rel() { hidemenus(); document.getelementbyid('real').style.display = "block"; } function hidemenus() { document.getelementbyid('mobi').style.display = "none"; document.getelementbyid('elec').style.display = "none"; document.getelementbyid('vehi').style.display = "none"; document.getelementbyid('home').style.display = "none"; document.getelementbyid('pets').style.display = "none"; document.getelementbyid('book').style.display = "none"; document.getelementbyid('clot').style.display = "none"; document.getelementbyid('kids').style.display = "none"; document.getelementbyid('spor').style.display = "none"; document.getelementbyid('serv').style.display = "none"; document.getelementbyid('jobs').style.display = "none"; document.getelementbyid('real').style.display = "none"; } </script> </body> </html> what need is
- when click last 1 in menu should display result without moving top of page
or
do need create scroll bar menu
in short:
<a href="#" class="flaticon-house111" onclick="return rel();">real estate</a> function rel() { hidemenus(); document.getelementbyid('real').style.display = "block"; return false; // <-- prevent anchor # link trigerring } and repeat links , functions
Comments
Post a Comment