如何做到点击链接后页面不跳回到最前面?


<html>
<head>
<title>导航条</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"> 
<!-- 
function getObject(objectId) { 
 if(document.getElementById && document.getElementById(objectId)) { 
 return document.getElementById(objectId); 
 } 
 else if (document.all && document.all(objectId)) { 
 return document.all(objectId); 
 } 
 else if (document.layers && document.layers[objectId]) { 
 return document.layers[objectId]; 
 } 
 else { 
 return false; 
 } 

///
function showHide(e,objname){     
    var obj = getObject(objname); 
    if(obj.style.display == "none"){ 
        obj.style.display = "block"; 
        e.className="xias"; 
    }else{ 
        obj.style.display = "none"; 
        e.className="rights"; 
    } 

--> 
</script> 
<style type="text/css"> 
body { font-size:12px; margin:20px; padding:0; text-align:left;} 
dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} 
li { list-style:none;} 
.libiao_menu { margin-bottom:15px;} 
.libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; width:130px; height:28px; font-size:14px; text-align:left; padding-left:65px; padding-top:13px; color:#0066cc;} 
.libiao_menu dl { margin-left:30px; margin-top:5px;} 
.libiao_menu dl dt { font-size:14px; line-height:24px;} 
.libiao_menu dl dt a { padding-left:13px; color:#333;} 
.libiao_menu dl dt a.rights { background:url(http://www.codefans.net/jscss/demoimg/200905/dots.gif) no-repeat 0 3px;} 
.libiao_menu dl dt a.xias { background:url(http://www.codefans.net/jscss/demoimg/200905/dots.gif) no-repeat 0 -41px;} 
.libiao_menu dl dd { padding-left:20px;} 
.libiao_menu dl dd ul {} 
.libiao_menu dl dd ul li { font-size:14px; line-height:24px;} 
.libiao_menu dl dd ul li a { color:#06c;} 
</style>
</head>
<body> 
<br /><br /><br /><br /><br /><br /><br /><br />
<a>请移动到最后面</a>
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />

<div class="libiao_menu"> 
        <dl> 
            <dt><a href="#" class="xias" onclick="showHide(this,'items0');">我的网上订单</a></dt> 
            <dd id="items0" style="display: block;"> 
                <ul> 
                    <li><a href="#">所有订单</a></li> 
                    <li><a href="#">未付款订单</a></li> 
                    <li><a href="#">处理中的订单</a></li> 
                </ul> 
            </dd> 
        </dl> 
        <dl> 
            <dt><a href="#" class="xias" onclick="showHide(this,'items1');">帐户管理</a></dt> 
            <dd id="items1" style="display: block;"> 
                <ul> 
                    <li><a href="#">我的余额</a></li> 
                    <li><a href="#">管理地址</a></li> 
                </ul> 
            </dd> 
        </dl>         
    </div>
</body>
</html>

以是功能是实现导航的菜单,当点击后面的链接时,页面立即回到最上面了,如何才能让它原地不动啊?
(为了达到效果我在菜单的前面加了很多<br />,目的是把菜单压到最后,以测试效果)

6 个解决方案

#1


  <li><a href="#">所有订单</a></li>  
  <li><a href="#">未付款订单</a></li>  
  <li><a href="#">处理中的订单</a></li>
  <li><a href="#">我的余额</a></li>  
  <li><a href="#">管理地址</a></li> 

链接路径都是默认的本页面,点击跳转的时候,当然是回到页面上啊!需要在这上面纠结?

#2


<a onclick="javascript:void(0)" href="#">所有订单</a>

#3


链接路径都是默认的本页面,点击跳转的时候,当然是回到页面上

#4


JS function中 return false

#5


<a>标签中的属性  href="#"时候,屏幕会回到最顶端,可以在那些回到屏幕顶端的应用中使用
href="javascript:void(0);" 表示什么也不做,当然也不会回到顶端

#6


href="javascript:void(0);" 表示什么也不做,当然也不会回到顶端
这个是关键,谢谢!!!!

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号