Question

HTML4中是否有办法让您的网站导航链接到页面上的不同滑块。

如果我有导航的意思：

Catagory 1 | Catagory 2 | Catagory 3 | Catagory 4

有没有一种方法可以点击Catagory 1，下面会出现一个关于catagory 1的视频滑块。同样适用于catagory 2，依旧等等。

Answer 1

取决于你想要如何做到这一点，但这里有一个选项：

基本上我们有一个带有四个链接的导航栏，每个链接链接到一个锚点：

<div class='nav'>
<a href="#1">1</a> | <a href="#2">2</a> | <a href="#3">3</a> | <a href="#4">4</a>
</div>

然后我们有一个包含四个div的容器 - 每个div都有一个与导航栏中的锚链接相关的id：

<div class='container'>
   <div class='container1' id="1">
   Container 1
   </div>
   <div class='container2' id="2">
   Container 2
   </div>
   <div class='container3' id="3">
   Container 3
   </div>
   <div class='container4' id="4">
   Container 4
   </div>
</div>

然后是一些CSS。其中一些仅用于样式目的，但您基本上希望使容器100％宽，隐藏x溢出。然后，每个包含div（1-4）的应该绝对设置，每次偏移量为100％。

.nav {
  width:100%;
  font-family: Arial;
  font-size: 15pt;
  text-align: center;
  margin-bottom: 20px;
}
.container {
  font-family: Arial;
  font-size: 30pt;
  width:100%;
  background: black;
  height: 400px;
  position: relative;
  overflow-x: hidden;
}
.container1 {
  text-align: center;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}
.container2 {
  text-align: center;
  left: 100%;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}
.container3 {
  text-align: center;
  left: 200%;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}
.container4 {
  text-align: center;
  left: 300%;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}

在实践中：

https://jsfiddle.net/9rfdyw27/

有很多更简洁的方法可以做到这一点，但我把它扔到一起，至少让你知道你可以在哪里使用它。你真的不需要JS，除非你想通过链接到链接的转换让它看起来更加嗖嗖。

网站导航和滑块

1 个答案: