CSS Переход между почти идентичными страницами

0 patrickstarpants [2016-03-17 17:46:00]

У меня есть две страницы, index.html и about.html, оба с использованием того же стиля CSS.

На моем веб-сайте две ссылки: "О себе" и "Домой". Единственная разница между этими двумя страницами - отображаемый текст абзаца (навигационные и нижние колонтитулы идентичны).

Как я могу создать переход для страницы/текста при щелчке по ссылке на главной странице или наоборот?

Переход по умолчанию по умолчанию - это то, что я ищу, и, допустим, я дал абзацы id = "target"

В моем файле css я бы сделал что-то вроде

#target {
    transition: 1s;
}

Я понятия не имею, какое свойство css мне нужно будет указать.

html css css3

Оригинал вопроса (на английском)

1 Решение Elliott Quick [2016-03-17 18:07:00]

Для этого потребуется некоторый JavaScript или JQuery.

HTML

<a id="homeLink">Home</a>
<a id="aboutLink">About</a>

<p id="targetHome">This is the home Paragraph...</p>
<p id="targetAbout" class="hidden">This is the about Paragraph...</p>

JS

$(document).on("click", "#aboutLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetHome:visible").hide("fade", 300, function(){
       $("#targetAbout:hidden").show("fade", 300); //Show About Paragraph if hidden
    });
});

$(document).on("click", "#homeLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetAbout:visible").hide("fade", 300, function(){
       $("#targetHome:hidden").show("fade", 300); //Show Home Paragraph if hidden
    });
});

Оригинал ответа (на английском)

CSS Переход между почти идентичными страницами

1 ответ