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

    Question by:
    On

    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>

    Good Question?
    0
     

    ?

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

    Accepted Solution 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;">

    Top Expert Contributor

    Essential articles and videos from the Experts

    More valuable questions with Expert answers

    201511-LO-Qu-074

    Extend your technology team with the Experts Exchange community.

    — trusted by —

    Who answers my questions?Our community has technology experts around the world.

    Julian Hansen

    4

    Articles

    2,673

    Solutions

    Expert in:

    • JavaScript
    • PHP
    • jQuery
    • CSS
    • HTML

    Slick812

    1,901

    Solutions

    Expert in:

    • Delphi
    • PHP
    • JavaScript
    • AJAX
    • CSS

    Robert Schutt

    1,243

    Solutions

    Expert in:

    • JavaScript
    • .NET Programming
    • Visual Basic.NET
    • ASP.NET
    • C#

    Alexandre Simões

    6

    Articles

    1,022

    Solutions

    Expert in:

    • .NET Programming
    • C#
    • JavaScript
    • Visual Basic.NET
    • ASP.NET

    Mikkel Sandberg

    3

    Articles

    29

    Solutions

    leakim971

    1

    Articles

    8,116

    Solutions

    Expert in:

    • JavaScript
    • jQuery
    • AJAX
    • ASP.NET
    • HTML

    Steve Bink

    3,526

    Solutions

    Expert in:

    • MS Access
    • PHP
    • Apache Web Server
    • MySQL Server
    • Web Development-Other

    Scott Fell

    1

    Articles

    3,584

    Solutions

    Expert in:

    • ASP
    • HTML
    • Web Development-Other
    • CSS
    • JavaScript

    dgrafx

    664

    Solutions

    Expert in:

    • Web Servers
    • ColdFusion Language
    • Web Dev Software
    • JavaScript
    • Web Development-Other

    RELATED TOPICS view all topics

    1. HTML
      (56,084)
    2. jQuery
      (14,702)
    3. PHP
      (116,183)
    4. AJAX
      (11,844)
    5. Web Languages/Standards-Other
      (39,426)
    6. ASP.NET
      (122,121)
    7. CSS
      (39,400)
    8. Web Development-Other
      (72,077)
    9. Scripting Languages
      (25,843)
    10. JScript
      (6,857)