Навигация и слайдеры веб-сайта

Question

Есть ли способ в HTML4 иметь ссылку на сайт для разных слайдеров на странице.

Значение, если у меня есть navigatio:

категоризации: 1 | Catagory 2 | Catagory 3 | Catagory 4

есть способ, где, если щелкнуть на Catagory 1, ниже будет показан слайдер видео, относящийся к категории 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> 

Тогда мы имеем контейнер, содержащий четыре divs - каждый с идентификатором, относящимся к привязным ссылкам в навигационной панели:

<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, если вы не хотите, чтобы это выглядело немного шире с переходом от ссылки к ссылке.