Disable default behavior of links_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-06 06:28 出处：网络

I have a list of menus: <ul> <li><a href=\"#about\" id=\"about\">ՄԵՐ ՄԱՍԻՆ</a></li>

I have a list of menus:

<ul>
    <li><a href="#about" id="about">ՄԵՐ ՄԱՍԻՆ</a></li>
    <li><a href="#products" id="products" >ԱՐՏԱԴՐԱՆՔ</a></li>
    <li><a href="#farm" id="farm"开发者_如何转开发 >ՏՆՏԵՍՈՒԹՅՈՒՆ</a></li>
    <li><a href="#gallery" id="gallery" >ՆԿԱՐՆԵՐ</a></li>
    <li><a href="#contacts" id="contacts">ՀԵՏԱԴԱՐՁ ԿԱՊ</a></li>
</ul>

and I use the address plugin to have back/forward along ajax, but I have a little bug that I'm not able to fix.

When I click on the menu, if the page has scrolling, it moves the page until the menu appears in the top of page, but I don't need it do that.

Is there a method to disable this behavior?

Thanks a lot.

Create or modify the click() handlers for the links to use the preventDefault() method.

For example:

$("a").click 
(
    function (evt)
    {
        //YOUR CODE HERE

        evt.preventDefault(); 
        return false;  
    } 
);

try adding the following to your links:

onclick="return false;"

Since you are probably adding an event handler to this link for the click event. Just add the return false to the end of it rather than directly on the HTML tag.

'href="#about"' refers to the element with the id 'about'. that is why the page is moved

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>

    <div id="datosResultado">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
        6<br />
        7<br />
        8<br />
        9<br />
        10<br />
    </div>
    <ul id="yourMenu">
        <li><a href="#about" id="about">about</a></li>
        <li><a href="#products" id="products">products</a></li>
        <li><a href="#farm" id="farm">farm</a></li>
        <li><a href="#gallery" id="gallery">gallery</a></li>
        <li><a href="#contacts" id="contacts">contacts</a></li>
    </ul>

    <div id="you-click"></div>

</body>

<script type="text/javascript">

$(function(){

    $("#yourMenu>li>a").bind("click", function(ev){

        ev.stopPropagation();

        //...your code...

        $("#you-click").html($(this).html());

        return false;
    });
});

</script>

As andres descalzo says, it moove becouse they have the same id, then in href. So i just need to change the id of a tags

    <a href="#about" id="_about">ՄԵՐ ՄԱՍԻՆ</a>
    <a href="#products" id="_products"> ԱՐՏԱԴՐԱՆՔ</a>
   ....................................................

it solves the whole problem.

Thanks all of you for your attention, and ideas;)