个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 03:34:26 25 4
gpt4 key购买 nike

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

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>

我需要的是

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

最佳答案

简而言之:

<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
}

并重复所有链接和函数

关于javascript - 当我点击菜单底部标签时整个页面向上移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25771605/

25 4 0
文章推荐： html - CSS居中边框
文章推荐： python - 如何在azure webjob中使用python虚拟环境
文章推荐： linux - 如何在 openSuSE 上的 Eclipse Mars 中分离 View 窗口？
文章推荐： python - 在动态编程硬币示例中使用无穷大 - 为什么这不会失败？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com