通过onhashchange事件，点击a标签，文本框出现对应内容

效果

css代码

    a{
        display: inline-block;
        text-decoration: none;
        width: 100px;
        height:50px;
        line-height:50px;
        text-align: center;
        color:#999;
    }
    div{
        width:300px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

html代码

<a href="#boy1">洪在烈</a>
<a href="#boy2">瓦斯科</a>
<a href="#boy3">朴玄硕</a>
<div id="content"></div>

js代码

 var data={
        boy1:'洪在烈',
        boy2:'瓦斯科',
        boy3:'朴玄硕'
    };
window.onhashchange=function(){
     var hash=window.location.hash;//保存当前改变了hash值的hash值
     hash=hash.substring(1);//因为这里获取到的hash值是（#boy1），所以要把前面的#去掉
     document.getElementById('content').innerText=data[hash];
 };