return false防止默认的事件行为

问题现象

点击对应的文字链接，图片最终不会在图片区显示照片，而是最终页面发生跳转，导致屏幕单独显示图片；

点击前:
这里写图片描述

点击后:
这里写图片描述

解决办法

在点击事件执行完后，返回return false，取消浏览器对超链接默认的事件行为；

关键代码如下：

<a href="img/海南.jpg" alt="这里是海南" onclick="return ShowPicture(this)">
在ShowPicture()函数中返回fals
</a>

或者

<a href="img/海南.jpg" alt="这里是海南" onclick="ShowPicture(this); return false">
海南
</a>

源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>
        </title>
        <link rel="stylesheet" href=""/>
    </head>
    <body>
        <h1>
            <i>美好风光</i>
        </h1>
        <ul>
            <li>
                <a href="img/海南.jpg" alt="这里是海南" onclick="return ShowPicture(this)">
                    海南
                </a>
            </li>
            <li>
                <a href="img/桂林.jpg" alt="这里是桂林" onclick="return ShowPicture(this)">
                    桂林
                </a>
            </li>
            <li>
                <a href="img/宏村.jpg" alt="这里是宏村" onclick="return ShowPicture(this)">
                    宏村
                </a>
            </li>
            <li>
                <a href="img/九寨沟.jpg" alt="这里是九寨沟" onclick="return ShowPicture(this)">
                    九寨沟
                </a>
            </li>
        </ul>
        <img id="placeholder" src="img/九寨沟.jpg" alt="这里是九寨沟" width="500px" height="400px"/>
        <p id = "PictrueDescripte">这里是九寨沟</p>
        <script>

            function ShowPicture(whichpic){

                var attrValue   = whichpic.getAttributeNode("href").value;
                var placeholder = document.getElementById("placeholder");
                placeholder.setAttribute("src",attrValue);

                var attrDescription   = whichpic.getAttributeNode("alt").value;
                var Description       = document.getElementById("PictrueDescripte");
                Description.innerHTML = attrDescription;

                return false;
            }       

        </script>
    </body>
</html>