通过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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html代码

洪在烈
瓦斯科
朴玄硕

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];
};