1

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

在我的 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。

4

2 回答 2

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）上不起作用，这就是为什么这是一种相当理论化的方法的原因之一。

于 2013-09-03T18:27:06.950 回答
0

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

注意：您必须包括， <script src="http://code.jquery.com/jquery-1.9.1.js"></script>因为我使用了一点jQuery（A JavaScriptlibrary）

<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>
于 2013-09-03T18:19:17.927 回答