阅读背景:

css3 实现非锚点的页面跳转效果

来源:互联网 

演示案例点这里


html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="李祺丰,www.qifeng.site,mail:[email protected]">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>css3非锚点跳转案例</title>
    <link rel="stylesheet" href="/go.html?url=./reset.css">
    <link rel="stylesheet" href="/go.html?url=./index.css">
</head>
<body>
    <div class="container">
        <input class="tabCon" type="radio" name="tab" checked id="tab1">
        <a class="tabCon" href="/go.html?url=#tab1">a</a>
        <input class="tabCon" type="radio" name="tab" id="tab2">
        <a class="tabCon" href="/go.html?url=#tab2">b</a>
        <input class="tabCon" type="radio" name="tab" id="tab3">
        <a class="tabCon" href="/go.html?url=#tab3">c</a>
        <input class="tabCon" type="radio" name="tab" id="tab4">
        <a class="tabCon" href="/go.html?url=#tab4">d</a>
        <section class="floor f1">
            <h1 class="text-center">这是第一屏</h1>
        </section>
        <section class="floor f2"><h1>这是第二屏</h1></section>
        <section class="floor f3">这是第三屏</section>
        <section class="floor f4">这是第四屏</section>
    </div>
</body>
</html><!DOCTYPE html>
<html 



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: