网站导航和滑块

Question

在 HTML4 中有没有办法让您的站点导航 link 到页面上的不同滑块。

意思是如果我有导航：

类别 1 |类别 2 |类别 3 |类别 4

有没有一种方法，如果点击类别 1，下面会出现与类别 1 有关的视频滑块。类别 2 也是如此，依此类推。

Answer 1

具体取决于您希望如何执行此操作，但这里有一个选项：

基本上我们有一个包含四个 link 的导航栏，每个导航栏 link 指向一个锚点：

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

然后我们有一个包含四个 divs 的容器 - 每个都有一个与导航栏中的锚点 links 相关的 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，除非你想让它看起来更漂亮一点从 link 到 link 的过渡。

网站导航和滑块

Website navigations and sliders

javascript

css

navigation

slider

html4