不使用JavaScript水平地创建HTML锚点

Question

不使用JavaScript水平地创建HTML锚点

5

http://www.indofolio.com/，我想创建一个类似于这个网站的功能，但我不知道他是如何在没有JavaScript的情况下使用锚标签进行水平滚动的。

关闭JavaScript，他的网站仍然正常运行。我非常喜欢他所做的渐进增强。

水平定位的测试代码，删除inline-block和float left，它可以完美地工作。

    <!DOCTYPE HTML>
    <html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ab {
    width: 20%;
    height: 20%;
    float: left;
    display: inline-block;
    border: 1px solid red;

}

</style>
 </head>
 <body>
 <a href="#box1">aaaaaaa</a>
 <a href="#box2">bbbbbbb</a>
<div id="container" style="width:100%">
    <ul style="width:500%;height:2000px;background-color:red">
        <li class="ab"><a name="box1"></a>
            <div>test</div>
        </li>
        <li class="ab"><a name="box2"></a>
            <div>test2</div>
        </li>
        <li class="ab">
            <a name="box3"></a>
            <div>test3</div>
        </li>
        <li class="ab">
            <div></div>
        </li>
        <li class="ab">
            <div></div>
        </li>
    </ul>
</div>
 </body>
 </html>

- Briefbreaddd

2个回答

-1

如果JS不可用，它将使用常规锚点垂直滚动。

水平定位是通过JS应用的。

- Quentin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottS · Accepted Answer

像Quentin所说，但如果您是新手网页设计师，他的解释可能有些欠缺。关闭javascript后，请注意url会发生变化。主页是www.indofolio.com/#box1，下一个是#box2等等。这些都是他使用的内容框的id。 a标签的正常行为是“跳转”到页面上存在的这些点，如果锚点设置为这样做。他的主页锚点是<a class="link home selected" href="#box1">Home</a>，其中href是导致跳转到该位置的原因。

编辑：这里是一些重写的代码示例。

HTML

<div id="nav">
 <a href="#box1">B1</a>
 <a href="#box2">B2</a>
 <a href="#box3">B3</a>
 <a href="#box4">B4</a>
 <a href="#box5">B5</a>
</div>
<div id="container">
    <ul>
        <li class="ab" id="box1">
            <div>test1</div>
        </li>
        <li class="ab" id="box2">
            <div>test2</div>
        </li>
        <li class="ab" id="box3">
            <div>test3</div>
        </li>
        <li class="ab" id="box4">
            <div>test4</div>
        </li>
        <li class="ab" id="box5">
            <div>test5</div>
        </li>
    </ul>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}
.ab {
    width: 20%;
    float: left;
    padding: 0;
    margin: 0;
}

.ab div {
    height: 500px;   
    border: 1px solid red;
}

#container {
    width: 500%; /* five page widths for five horizontal pages */
    padding: 0;
    margin: 1.5em 0 0;
}

#container ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav {
    position: fixed;
    left: 0;
    top: 0;
}

#nav a {
    margin-right: 10px;
    display: inline-block;
}