页面内锚链接跳转

如图,点击右边的字母,使页面跳转到对应的地方,一般车票里面都会有这种的

这边我才用了a标签的锚链接,都不用js,就可以实现跳转

<div class="chooseAddress">
    <div class="list" id="a">  
    <!-- 这里的id="a" 是要跳转的地方 -->    
        <p>a</p>
        <ul>
            <li>阿城</li>
            <li>阿尔山</li>
            <li>艾河</li>
        </ul> 
    </div>
    <div class="list" id="b">      
        <p>b</p>
        <ul>
            <li>巴楚</li>
            <li>八达岭</li>
            <li>巴东</li>
        </ul> 
    </div>
    <div class="letter">
        <a href="#a">a</a>
        <!-- 点击此处,跳转到对应的地方 -->
        <a href="#b">b</a>
        <a href="#c">c</a>
    </div>
</div>

需要点击的地方,就用a标签,在href里面设置,要跳转的地址,比如href="#a",的意思是跳转到id是a的地方,

然后,如果想跳转到哪里,就在哪里设置id=a,就可以了,都写好之后,点击a标签,屏幕就回跳到对应的地方

比如上图的状态,我现在点击右边的字母a,页面就会变成下图这样,

猜你喜欢

转载自blog.csdn.net/Hero_rong/article/details/84103898
今日推荐