1. 首頁
  2. 問答
  3. 整個頁面向上移動，當我點擊菜單底部的標籤

整個頁面向上移動，當我點擊菜單底部的標籤

2014-09-10 27 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

相關問題

 相關問題