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

Question

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

在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>

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

Answer 1

在不重新加载页面的情况下切换正文文本的想法就是通常所说的“单页面应用程序”，这是一种非常流行的东西，它具有许多优点以及一些缺点或挑战。 通常使用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>

例如，这在IE 8及更高版本（不支持:target ）上不起作用，这是为什么这是一种理论上的方法的原因之一。

Answer 2

您将需要使用Javascript来动态更改内容，而无需刷新页面。这很粗糙，但是将向您展示如何做您期望的事情。

注意：您必须包含<script src="http://code.jquery.com/jquery-1.9.1.js"></script>因为我已经使用了一些jQuery （ JavaScript库）

<html>
<head>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="nav-bar">
<ul class="nav">
    <li id="other1" onClick="changeText('other1');"><a>About</a></li>
    <li id="other2" onClick="changeText('other2');"><a>Contact</a></li>
    <li id="other3" onClick="changeText('other3');"><a>Other</a></li>
</ul>
</div>
<div id="page_content">
PAGE CONTENT!!
</div>

<script>
 function changeText(text){
      if (text === 'other1'){
      $('#page_content').html('About Us!!');
      }
      if (text === 'other2'){
      $('#page_content').html('Contact Us!!');
      }
      if (text === 'other3'){
      $('#page_content').html('Other!!');
      }

 }
</script>
</body>
</html>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-09-03 18:27:06

解决方案2
0 2013-09-03 18:19:17

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-09-03 18:27:06

解决方案2 0 2013-09-03 18:19:17

解决方案1
1 已采纳 2013-09-03 18:27:06

解决方案2
0 2013-09-03 18:19:17