我正在尝试创建一个包含多篇文章的网站，我想知道如何从主页上的文章中创建一个链接，并让用户点击它来阅读类似于信息或新闻网站的完整文章。目前的问题是，整篇文章都发布在主页上，目标是从主页上的可用文章中创建一个链接，供用户像其他信息/新闻网站一样点击阅读整篇文章。我想知道的是，我该如何做到这一点？代码的完整链接：https://jsfiddle.net/0xkuqb39/1/
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<h2>Article 1</h2>
<h5>Date</h5>
<p>Some text here </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<h2>Article 2</h2>
<h5>Date</h5>
<p> Some text here </p>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</body>
$(document).ready(function () {
$("#header").hide().fadeIn(2000);
});
$(document).ready(function () {
$("#title").hide().fadeIn(2000);
});
$(document).ready(function () {
$("#footer").hide().fadeIn(2000);
});/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #32cd32;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: #7df9ff;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 100%;
}
/* Add a card effect for articles */
.card {
background-color: #87ceeb;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #00bfff;
margin-top: 20px;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div id="Title">
<h2>Article 1</h2>
<h5>Date</h5>
<p>Some text here <a href="article1.html">read full article</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div id="Title2">
<h2>Article 2</h2>
<h5>Date</h5>
<p>Some text here <a href="https://en.wikipedia.org/wiki/Main_Page">read full article</a></p>
</div>
</div>
</div>
<div class="footer">
<div id="footer">
</div>
</body>
</html>当前，您的锚点(链接(如下所示：
<a href="#contact">Contact</a>
这种方式用于链接到同一页面上的不同位置。例如：
<a href="#content">Go to content</a>
<!-- Just to create a visual separation -->
<div style="height: 100vh"></div>
<div id="content">
Test
</div>然而，如果你不想让你的文章出现在主页上，你需要为每一篇文章创建一个单独的HTML文件。因此，例如，如果您创建了一个名为"的新HTML文件；article_1.html"；，把它放在与主页相同的文件夹中，然后你可以这样链接到它：
<a href="article_1.html">Article 1</a>