Question

我有两个页面，index.html和about.html，都使用相同的CSS样式。

在我的网站上，其中两个链接是About和Home。这两个页面之间的唯一区别是显示的段落文本（导航和页脚相同）。

当从主页点击about链接时，如何为页面/文本创建转换，反之亦然？

我正在寻找默认的轻松过渡，让我们说这段落的内容是id =＆＃34; target＆＃34;

在我的css文件中，我会做类似

的事情

#target {
    transition: 1s;
}

我不知道我需要指定哪个css属性。

Answer 1

它需要一些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 个答案: