CSS/HTML5使用：target或：active在单击链接时显示不同的文本_Html_Css_Target

CSS/HTML5使用：target或：active在单击链接时显示不同的文本

html css

CSS/HTML5使用：target或：active在单击链接时显示不同的文本,html,css,target,Html,Css,Target,抱歉，这可能是一个非常开放的问题。。。我想知道当点击链接时是否有可能显示不同的文本。例如，在我的个人网站上，如果我有一个“关于”或“联系”链接，我可以在不重新加载页面的情况下切换正文文本在index.html文件的正文中，我有： <div class="nav-bar"> <ul class="nav"> <li id="other"><a>About</a></li> <li id="other"&

抱歉，这可能是一个非常开放的问题。。。我想知道当点击链接时是否有可能显示不同的文本。例如，在我的个人网站上，如果我有一个“关于”或“联系”链接，我可以在不重新加载页面的情况下切换正文文本

在index.html文件的正文中，我有：

<div class="nav-bar">
<ul class="nav">
    <li id="other"><a>About</a></li>
    <li id="other"><a>Contact</a></li>
    <li id="other"><a>Other</a></li>
</ul>
</div>



关于
联系人
其他

in想知道我是否可以在单独的CSS样式表中使用：active或：target来执行上述任务，或者我是否需要使用JS。

您需要使用Javascript来动态更改内容，而无需刷新页面。。。这是粗糙的，但会告诉你如何做你所期望的

注意：您必须包含

，因为我使用了一点

jQuery

（一个

JavaScript

库）



关于
联系人
其他

页面内容！！
函数更改文本（文本）{
如果（文本=='other1'）{
$（'page_content'）.html（'About Us！！'）；
}
如果（文本=='other2'）{
$（'page_content'）.html（'Contact-Us！！'）；
}
如果（文本=='other3'）{
$（'page_content'）.html（'Other！！'）；
}
}

您需要使用Javascript在不刷新页面的情况下动态更改内容。。。这是粗糙的，但会告诉你如何做你所期望的

注意：您必须包含

，因为我使用了一点

jQuery

（一个

JavaScript

库）



关于
联系人
其他

页面内容！！
函数更改文本（文本）{
如果（文本=='other1'）{
$（'page_content'）.html（'About Us！！'）；
}
如果（文本=='other2'）{
$（'page_content'）.html（'Contact-Us！！'）；
}
如果（文本=='other3'）{
$（'page_content'）.html（'Other！！'）；
}
}

在不重新加载页面的情况下切换正文文本的想法通常被称为“单页应用程序”，这是一种相当时髦的做法，有许多优点，也有一些缺点或挑战。它通常使用JavaScript实现，通常使用库或框架，因为这是我们处理网页编程的方式

但是，仅使用HTML和CSS就可以实现单页应用程序的基本功能。此功能意味着页面包含整个站点的内容，并且只有选定的部分可见。您可以使用

：target

，它指的是作为最新链接目标的元素。（

：active

伪类是一个非常不同的类：它指的是一个链接或等效的链接，通常是通过单击它来激活的，并且在它实际被跟踪之前–通常是很短的时间。）

最简单的例子：

<!doctype html>
<meta charset=utf-8>
<style>
.section { display: none }
.section:target { display: block }
</style>
<div class="nav-bar">
<ul class="nav">
    <li><a href=#About>About</a></li>
    <li><a href=#Contact>Contact</a></li>
    <li><a href=#Other>Other</a></li>
</ul>
</div>
<div id=About class=section>
About us
</div>
<div id=Contact class=section>
Contact us
</div>
<div id=Other class=section>
Other stuff
</div>


.节{显示：无}
.section:目标{显示：块}





关于我们
联系我们
其他东西

这不适用于IE 8及更高版本（不支持

：target

），这就是为什么这是一种理论方法的原因之一。

在不重新加载页面的情况下切换正文的想法通常被称为“单页应用程序”，一种相当时髦的东西，有很多好处，也有一些缺点或挑战。它通常使用JavaScript实现，通常使用库或框架，因为这是我们处理网页编程的方式

但是，仅使用HTML和CSS就可以实现单页应用程序的基本功能。此功能意味着页面包含整个站点的内容，并且只有选定的部分可见。您可以使用

：target

，它指的是作为最新链接目标的元素。（

：active

伪类是一个非常不同的类：它指的是一个链接或等效的链接，通常是通过单击它来激活的，并且在它实际被跟踪之前–通常是很短的时间。）

最简单的例子：

<!doctype html>
<meta charset=utf-8>
<style>
.section { display: none }
.section:target { display: block }
</style>
<div class="nav-bar">
<ul class="nav">
    <li><a href=#About>About</a></li>
    <li><a href=#Contact>Contact</a></li>
    <li><a href=#Other>Other</a></li>
</ul>
</div>
<div id=About class=section>
About us
</div>
<div id=Contact class=section>
Contact us
</div>
<div id=Other class=section>
Other stuff
</div>


.节{显示：无}
.section:目标{显示：块}





关于我们
联系我们
其他东西

这不适用于IE 8及更高版本（不支持

：target

），这也是为什么这是一种相当理论化的方法的原因之一。

所有这些

li

不能具有相同的ID，这是无效的HTMLT。这听起来像是您想要创建一个单页应用程序。仅使用HTML和CSS来实现这一目的是相当理论化的；web应用程序需要一种编程语言，实际上是JavaScript。我不知道为什么我有那些“其他”ID。。。我甚至没有使用它们（一定是尝试了一些东西，然后在不删除ID的情况下将其丢弃）谢谢！所有这些

li

不能具有相同的ID，这是无效的HTMLT这听起来像是您想要创建一个单页应用程序。仅使用HTML和CSS来实现这一目的是相当理论化的；web应用程序需要一种编程语言，实际上是JavaScript。我不知道为什么我有那些“其他”ID。。。我甚至没有使用它们（一定是尝试了一些东西，然后在不删除ID的情况下将其丢弃）谢谢！太好了，这正是我想要的！！非常感谢！太好了，这正是我想要的！！非常感谢