href="javascript:func()" vs href="#" onclick="javascript:func()"

    Topics:

    <a href="javascript:expand()">  and <a href="#" onclick="javascript:expand()">

    what's the difference? i know the href="#" is the more standard way nowdays to do it. my problem is i have a standard dropdown menu that expand/collapse when user clicks on toggle. if i do href="#" for the code below, whenever someone clicks on expand the page ALWAYS scroll right back to the top which isnt acceptable from a user friendly point.  If i use href="javascript:expand()" when user clicks expand, the page doesnt move and everything is ok.  So will there be any problems if i just use href="javascript:expand()" instead?  or how do i fix the href="#" so the page doesnt scroll back to the top whenever user clicks expand.  thanks.

    <html>
    <head>
    <title> tabletest </title>
    <script>
    function expand(sec)
    {
         thisSec = eval('e' + sec);
         if (thisSec != null){
              if (thisSec.length){
                   if (thisSec[0].style.display != 'none'){
                        for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'none'}
                   }
                   else{
                        for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'inline'}
                   }
              }
              else{
                             if (thisSec.style.display != 'none')     {thisSec.style.display = 'none'}
                   else{thisSec.style.display = 'inline'}
              }
         }

    }
    </script>


    </head>

    <body>

    <table cellpadding="0" cellspacing="0" width="950" border="0">

    <tr>
            <td>col1</td>
            <td align="right">col2</td>
            <td align="right">col3</td>
            <td align="right">col4</td>
            <td align="right">col5</td>
            <td align="right">col6</td>
    </tr>


    <tr>
            <td><a href="javascript:expand(0)"> toggle      abbbccaaaaa</a></td>
            <td align="right">&nbsp;75</td>
            <td align="right">&nbsp;12</td>
            <td align="right">&nbsp;325</td>
            <td align="right">&nbsp;115</td>
            <td align="right">&nbsp;105</td>
    </tr>

    <tr id="e0" style="display:none">
    <td colspan="99">
                <table border="0">
                <tr><td>column1</td><td>column2</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>1</td><td>abadd</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>5</td><td>cddad</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                <tr><td>30</td><td>asfddf</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                </table>
    </td>
    </tr>
    <tr>
            <td><a href="javascript:expand(1)">toggle    abbbccaaaaa</a></td>
            <td align="right">&nbsp;75</td>
            <td align="right">&nbsp;12</td>
            <td align="right">&nbsp;325</td>
            <td align="right">&nbsp;115</td>
            <td align="right">&nbsp;105</td>
    </tr>
    <tr id="e1" style="display:none">
    <td colspan="99">
                <table border="0">
                <tr><td>column1</td><td>column2</td></tr>
                <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                 <tr><td>1</td><td>abadd</td></tr>
                 <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                 <tr><td>5</td><td>cddad</td></tr>
                 <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                 <tr><td>30</td><td>asfddf</td></tr>
                 <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
                 </table>
    </td>
    </tr>
    </table>
    </body>
    </html>

     

    Verified Answer?

    The member who asked this question verified this comment provided the solution that solved their problem.

    by:Posted on 2004-03-11 at 08:54:33ID: 10573032

    this is the outdated way and will cause problems
     <a href="javascript:expand()">  

    and the reason this <a href="#" onclick="javascript:expand()"> scrolls to the top is
    your not return false like so

    <a href="#" onclick="expand();return false;">

    This content is available to Experts Exchange members

    See the answer now
    with your Free 30 Day Trial

    Get unlimited access to solutions & experts

    • 4,169,477 solved questions
    • 3,805 articles & videos
    • 15,413 tech experts

    Get Access Now

    Ask Your Tech Question. Get Expert Solutions.We will email you when an expert has commented on your question.

    We will never share this with anyone. Privacy Policy Terms of Use

    Select topics

    You may select up to five topics.

    Essential articles and videos from the Experts

    More valuable questions with Expert answers

    201507-LO-Qu-065