1. 首页
  2. 问答
  3. 整个页面向上移动，当我点击菜单底部的标签

整个页面向上移动，当我点击菜单底部的标签

2014-09-10 79 views
0

下面的代码工作正常
错误
- 当我点击最后一个标签菜单中的整个页面移动到顶端如何解决错误整个页面向上移动，当我点击菜单底部的标签

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&nbsp;&&nbsp;computer</a></li> 
      <li><a href="#" class="flaticon-car95" onClick="veh();">vehicle</a></li> 
      <li><a href="#" class="flaticon-livingroom6" onClick="hme();">home&nbsp;&&nbsp;furniture</a></li> 
      <li><a href="#" class="flaticon-dog50" onClick="pet();">pets</a></li> 
      <li><a href="#" class="flaticon-cd" onClick="bok();">books,&nbsp;cd&nbsp;&&nbsp;hobbies</a></li> 
      <li><a href="#" class="flaticon-black276" onClick="clo();">clothing&nbsp;&&nbsp;accessories</a></li> 
      <li><a href="#" class="flaticon-baby23" onClick="kid();">kids&nbsp;&&nbsp;baby</a></li> 
      <li><a href="#" class="flaticon-bicycle14" onClick="spo();">sport&nbsp;&&nbsp;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&nbsp;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>

我需要的是

  • 当我点击菜单中的最后一个应该显示没有米结果oving页面顶部
    OR
    我是否需要创建菜单

来源

2014-09-10 sanoj lawrence

+0

在每个'onClick'属性末尾添加'return false;' – Populus 2014-09-10 17:34:46

+1

@Populus，但已经有一个onclick值如何输入另一个值 – 2014-09-10 17:36:27

+0

'onclick =“mob（）; return false;”' – Populus 2014-09-10 17:37:24

回答

1

滚动条简而言之：

<a href="#" class="flaticon-house111" onClick="return rel();">real&nbsp;estate</a> 

function rel() { 
    hidemenus(); 
    document.getElementById('real').style.display = "block"; 
    return false; // <-- will prevent the anchor # link from trigerring 
}

，并重复所有的链接和功能

来源

2014-09-10 17:36:23

+1

不完整的答案。您还需要将'onclick'属性更改为像'onclick =“return rel（）”' – Populus 2014-09-10 17:37:58

+1

没有它的不工作 – 2014-09-10 17:38:29

+0

胡杨是正确的。 – 2014-09-10 17:39:49

1

和替代（和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("answer_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的链接，你可以尝试，作为一个锻炼。

来源

2014-09-10 18:14:51 Populus

 相关问题

  • 暂无相关问题^_^