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

时间：2014-09-10 17:33:01

标签： javascript jquery html css

以下代码正常工作
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&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>

我需要的是什么

  • 当我点击菜单中的最后一个时，它应显示结果而不移动到页面顶部
    或者是否我需要为菜单创建滚动条

2 个答案:

答案 0 :(得分：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
}

重复所有链接和功能

答案 1 :(得分：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动态地将事件侦听器附加到链接，您可以尝试将其作为练习。

相关问题
最新问题