下面是我的代码，其中包含表格格式的表格。我想要做的是让用户将鼠标悬停在表中的价格上，如果单击它，它将把用户定向到另一个显示价格的页面。例如，如果我将鼠标悬停在RM7的价格上，当单击它时，它将引导我到另一个页面，该页面向我显示单击的价格是RM7。请帮助
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="img/CarRent.ico">
<title>Kereta Sewa Bajet</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 85%;
border: 1px solid #ddd;
}
th,
td {
text-align: center;
padding: 8px;
}
td a {
display: block;
position: relative
}
td a:hover {
background: #808080;
color: white
}
body,
html {
height: 100%;
line-height: 1.8;
}
.w3-bar .w3-button {
padding: 16px;
}
/* Full height image header */
.bgimg-1 {
background-position: center;
background-size: cover;
background-image: url("img/Wallpaper.jpg");
min-height: 100%;
}
</style>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card" id="myNavbar">
<a href="index.php" class="w3-bar-item w3-button w3-wide">KERETA SEWA BAJET</a>
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<a href="login.php" class="w3-bar-item w3-button"><i class="fa fa-user"></i> LOGIN</a>
<a href="menu.php" class="w3-bar-item w3-button"><img src="img/myr.png" style="width:25px;height:25px;"> PACKAGE PRICES</a>
<a href="#contact" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i>
CONTACT</a>
<a href="aboutus.php" class="w3-bar-item w3-button">ABOUT US</a>
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-
medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-
large" style="display:none" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-
padding-16">Close ×</a>
<a href="login.php" onclick="w3_close()" class="w3-bar-item w3-button">LOGIN</a>
<a href="menu.php" onclick="w3_close()" class="w3-bar-item w3-button">PACKAGE PRICES</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">CONTACT</a>
<a href="aboutus.php" onclick="w3_close()" class="w3-bar-item w3-button">ABOUT US</a>
</nav>
<script>
// Toggle between showing and hiding the sidebar when clicking the menu icon
var mySidebar = document.getElementById("mySidebar");
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
} else {
mySidebar.style.display = 'block';
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
}
</script>
<!-- Car & Prices Menu -->
<\br>
<div style="overflow-x:auto;">
<pre><center>
<p style="margin-bottom: -3%; font-size:20px">Choose Your Package</p>
<form method="post" action="a1.php">
<table>
<tr> <!--row 1-->
<th>Car/Time</th>
<th>1 Hour</th>
<th>1 Day</th>
<th>3 Days</th>
<th>1 Week</th>
</tr>
<tr> <!--row 2-->
<td>VIVA ELITE</td>
<td><a style="text-decoration:none">RM 6</a></td>
<td><a style="text-decoration:none" >RM 100</a></td>
<td><a style="text-decoration:none" >RM 300</a></td>
<td><a style="text-decoration:none" >RM 550</a></td>
</tr>
<tr> <!--row 3-->
<td>AXIA</td>
<td><a style="text-decoration:none" >RM 7</a></td>
<td><a style="text-decoration:none" >RM 120</a></td>
<td><a style="text-decoration:none" >RM 320</a></td>
<td><a style="text-decoration:none" >RM 600</a></td>
</tr>
<tr><!--row 4-->
<td>MYVI 1.3</td>
<td><a style="text-decoration:none" >RM 8</a></td>
<td><a style="text-decoration:none" >RM 130</a></td>
<td><a style="text-decoration:none" >RM 370</a></td>
<td><a style="text-decoration:none" >RM 700</a></td>
</tr>
<tr><!--row 5-->
<td>MYVI SE 1.5</td>
<td>-</td>
<td><a style="text-decoration:none" >RM 140</a></td>
<td><a style="text-decoration:none" >RM 390</a></td>
<td><a style="text-decoration:none" >RM 750</a></td>
</tr>
<tr><!--row 6-->
<td>BEZZA 1.3</td>
<td>-</td>
<td><a style="text-decoration:none" >RM 140</a></td>
<td><a style="text-decoration:none" >RM 390</a></td>
<td><a style="text-decoration:none" >RM 750</a></td>
</tr>
<tr><!--row 7-->
<td>VIOS</td>
<td>-</td>
<td><a style="text-decoration:none" >RM 150</a></td>
<td><a style="text-decoration:none" >RM 430</a></td>
<td><a style="text-decoration:none" >RM 850</a></td>
</tr>
<tr><!--row 8-->
<td>ALZA</td>
<td>-</td>
<td><a style="text-decoration:none" >RM 180</a></td>
<td><a style="text-decoration:none" >RM 500</a></td>
<td><a style="text-decoration:none" >RM 1000</a></td>
</tr>
<tr><!--row 4-->
<td>EXORA BOLD</td>
<td>-</td>
<td><a style="text-decoration:none" >RM 250</a></td>
<td><a style="text-decoration:none" >RM 700</a></td>
<td><a style="text-decoration:none" >RM 1500</a></td>
</tr>
</form>
</table>
</div></pre>
</center>
<footer class="w3-center w3-black w3-padding-32">
<img src="img/BudgetLOGO.PNG" alt="" style="width:85px;height:25px;>
<br clear=" all " />
<p>Powered by <a href="index.php " class="w3-hover-text-green ">KSB</a></p>
<img src="img/BudgetLOGO.PNG " alt=" "style="width:80px;height:35px;>
</footer>
</body>
</html>
答案 0 :(得分：0)
您如何获得价格？如果它们是静态的，并且您只希望传递它们，则可以将价格附加到网址末尾的查询字符串中
<a href="yourdomain.com/the-page-with-the-other-table/?price=RM7">RM7</a>
然后，您的带有其他表的页面在查询时将具有一些JS来捕获该字符串-您可以将其包装在一个自执行函数中，该函数将更新字段/表/任何您喜欢的内容
(function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){
document.querySelector('your-element').textContent = pair[1];
return;
}
}
return(false);
}('price');
从这里修改：https://css-tricks.com/snippets/javascript/get-url-variables/