当我点击菜单底部标签时，整个页面向上移动 [英] entire page moves up when i click menu bottom tag
本文介绍了当我点击菜单底部标签时，整个页面向上移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下代码可以正常工作
ERROR
- 当我点击菜单中的最后一个标签时，整个页面移到顶部如何解决错误
the following code works fine
ERROR
- when i click the last tag in menu the entire page move to top how to resolve the 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;}
a {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>
我需要什么
- 当我点击菜单中的最后一个时，应该显示结果而不移动到页面顶部
OR
我需要为菜单创建滚动条 - when i click the last one in menu it should display the result without moving to top of the page
OR
Do i need create scroll bar for menu
推荐答案
简而言之：
<a href="#" class="flaticon-house111" onClick="return rel();">real estate</a>
function rel() {
hidemenus();
document.getElementById('real').style.display = "block";
return false; // <-- will prevent the anchor # link from trigerring
}
您的所有链接和功能
这篇关于当我点击菜单底部标签时，整个页面向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
