当我点击菜单底部标签时,整个页面都向上移动
entire page moves up when i click menu bottom tag
以下代码运行良好
错误
-当我点击菜单中的最后一个标签时,整个页面移动到顶部如何解决错误
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="answerswer_list" ><a href="#">mobile phones</a></div>
<div id="elec" style="display:none;z-index:99;" class="answerswer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answerswer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answerswer_list" >home</div>
<div id="pets" style="display:none;z-index:99;" class="answerswer_list" >pets</div>
<div id="book" style="display:none;z-index:99;" class="answerswer_list" >books</div>
<div id="clot" style="display:none;z-index:99;" class="answerswer_list" >clothing</div>
<div id="kids" style="display:none;z-index:99;" class="answerswer_list" >kids</div>
<div id="spor" style="display:none;z-index:99;" class="answerswer_list" >sport</div>
<div id="serv" style="display:none;z-index:99;" class="answerswer_list" >service</div>
<div id="jobs" style="display:none;z-index:99;" class="answerswer_list" >jobs</div>
<div id="real" style="display:none;z-index:99;" class="answerswer_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>
我需要的是
- 当我单击菜单中的最后一个时,它应该显示结果而不移动到页面顶部
或者
我需要为菜单创建滚动条吗
简而言之:
<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
}
并对您的所有链接和功能重复
以及备选(以及IMO更好)答案。
return false
方法不符合W3C(因为它没有文档),但它已经以这种方式工作了很长时间,所以我们这样做了。"正确"的方法是使用事件对象:
<a href="#" onclick="rel(event)">real estate</a>
Javascript:
function rel(event) {
event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no
hidemenus();
document.getElementById('real').style.display = "block";
}
实际上,你可以在这里进行一点优化:
<a href="#" onclick="showmenu(event)" data-menu="real">real estate</a>
function showmenu(event) {
event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no
hidemenus();
document.getElementById(event.target.getAttribute("data-menu")).style.display = "block";
}
// This works for IE9 and above
function hidemenus() {
var elements = document.getElementsByClassName("answerswer_list");
for (var i in elements) {
if (elements[i] instanceof HTMLElement) {
elements[i].style.display = "none";
}
}
}
这样,我们就不需要为每个链接定义一个单独的点击处理程序。注意,event.target
是用户单击的HTMLElement
对象,在本例中是链接。
我提供的hidemenus()
函数也消除了对硬编码功能的需要。elements[i] instanceof HTMLElement
检查的原因是getElementsByClassName
有时会在其中插入数组的长度,这会破坏代码。
使用完整代码:http://jsfiddle.net/g4qvtod2/1/
一种更高级的方法是使用addEventListener
动态地将事件侦听器附加到链接,您可以尝试将其作为练习。
相关文章:
- 选择后关闭移动菜单
- 关闭移动菜单后恢复滚动位置
- 当屏幕尺寸较小时,可使用Javascript向移动菜单添加链接.不再有效
- 移动菜单需要 Jquery 2.0.1,但其他站点脚本需要旧版本
- 如何让我的移动菜单按钮显示和隐藏导航栏,以及在负空间中单击时隐藏
- 引导移动菜单按钮不可见
- 移动菜单手风琴逻辑
- 在jquery中通过切换类和css转换来创建移动菜单
- 移动菜单切换问题(onclick 仅适用于外部容器,不适用于按钮)
- CSS - 移动菜单触发器
- 垂直移动菜单并显示子菜单
- 切换“.show”和“.hide”,条件始终为“.show”,如果浏览器视口处于特定宽度或更大.(响应式/移动菜单)
- Android移动菜单行为
- 更改引导程序后的移动菜单切换错误'的移动导航断点
- 确定菜单项是否溢出,然后显示移动菜单
- 点击即可水平移动菜单
- 移动菜单(js)没有加载在WordPress WPML网站上
- 响应式移动菜单-Jquery切换
- 需要帮助获得Bootstrap 3 Scrollspy与自动折叠移动菜单工作
- 移动菜单与引导关闭点击导航菜单