隨著現代互聯網的不斷發展，越來越多的網站都採用了資訊清單與相應的詳細資訊頁面來展示不同類別的資訊。在網站開發過程中，如何實現資訊清單頁面到詳細資訊頁面的跳躍是很重要的一步。本文將介紹如何使用PHP來實現這項功能。
一、前知識
在進行本文的學習前，我們需要掌握以下前置知識：
#二、實作方法
以下我們來看看如何實作這個功能：
首先，我們需要在資料庫中建立表格來儲存資訊清單及其詳細資訊。我們以「產品」為例，在資料庫中建立一個名為「products」的表格，包括以下欄位：
<!DOCTYPE html>
<html>
<head>
<title>产品列表</title>
<style>
.product {
margin-bottom: 30px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
display: inline-block;
width: 30%;
vertical-align: top;
margin-right: 3%;
margin-left: 3%;
}
.product img {
margin-bottom: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.product h2 {
font-size: 20px;
margin-bottom: 5px;
}
.product p {
font-size: 16px;
margin-bottom: 10px;
}
.product a {
display: block;
text-align: center;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+1" alt="Product 1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="">详细信息</a>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+2" alt="Product 2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="">详细信息</a>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+3" alt="Product 3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="">详细信息</a>
</div>
</body>
</html><a href="details.php?id=1">详细信息</a>
<?php
if (isset($_GET['id'])) {
$id = $_GET['id'];
} else {
header('Location: index.php');
exit;
}
?><?php
$db = mysqli_connect('localhost', 'username', 'password', 'database');
$query = "SELECT * FROM products WHERE id = $id";
$result = mysqli_query($db, $query);
if (mysqli_num_rows($result) == 0) {
echo '产品不存在';
exit;
} else {
$product = mysqli_fetch_assoc($result);
}
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $product['name']; ?></title>
<style>
.product {
margin-bottom: 30px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
width: 100%;
}
.product img {
margin-bottom: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.product h2 {
font-size: 20px;
margin-bottom: 5px;
}
.product p {
font-size: 16px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="product">
<img src="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>">
<h2><?php echo $product['name']; ?></h2>
<p><?php echo $product['description']; ?></p>
<p>价格：<?php echo $product['price']; ?></p>
</div>
</body>
</html>以上是php怎麼實現跳到詳細資訊頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
