遵循了w3中关于图像选项卡库的教程(https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp)。在他们自己的页面上，当您刷新/进入页面时，第一个图像会预装。但在他们的教程代码中却没有。我已经研究过请求并编写了一些代码来解决这个问题，但到目前为止运气不佳。
希望有人能给我指明正确的方向。我不知道在代码的主要部分在哪里调用javascript函数，以便在页面末尾实际显示javascript中的图像。下面是我的代码。非常感谢你的帮助。
MsKazza
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>College Hoodie - leavershoodies.ie</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'gothambook';
}
/* The grid: Four equal columns that floats next to each other */
.column_images {
float: left;
width: 75px;
padding: 10px;
}
/* Style the images inside the grid */
.column_images img {
opacity: 0.8;
cursor: pointer;
margin-left:17px;
}
.column_images img:hover {
opacity: 1;
margin-left:17px;
}
/* Clear floats after the columns */
.row_images:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container2 {
position: relative;
display: block;
width:350px;
text-align:center;
/* background-color: #5e5e5e; */
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 40%;
color: #5e5e5e;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<?php include 'header.php'; ?>
<?php
$product_id = $_GET['recordID'];
$sql = "SELECT * FROM products WHERE product_code = '$product_id'";
if($result = mysqli_query($conn, $sql))
while($row = mysqli_fetch_array($result))
{
?>
<div class="container" style="margin-top:10px;">
<div class="row">
<div class="col-4">
<div class="container2">
<span onclick="this.parentElement.style.display=none"; class="closebtn" ></span>
<img id="expandedImg" style="height:450px;"><br /><br />
<div id="imgtext"></div>
</div>
<div class="row_images">
<div class="column_images">
<img src="images/products/<?php echo $row['img1']; ?>" alt="" style="height:100px" onclick="myFunction(this);">
</div>
<div class="column_images">
<img src="images/products/<?php echo $row['img2']; ?>" alt="" style="height:100px" onclick="myFunction(this);">
</div>
<div class="column_images">
<img src="images/products/<?php echo $row['img3']; ?>" alt="" style="height:100px" onclick="myFunction(this);">
</div>
<div class="column_images">
<img src="images/products/<?php echo $row['img4']; ?>" alt="" style="height:100px" onclick="myFunction(this);">
</div>
</div>
</div> <!-- end of left 5 column -->
<div class="col-8">
<h1 class="text-center"><?php echo $row['product_name']; ?></h1>
<br />
<div class="container-fluid">
<div class="row">
<div class="col-3"><h5>Description</h></div>
<div class="col">
<?php echo $row['description']; ?>
</div>
</div> <!-- /row --><br />
<div class="row">
<div class="col-3"><h5>Specification</h></div>
<div class="col">
<?php echo $row['specification']; ?>
</div>
</div> <!-- /row --><br />
<div class="row">
<div class="col-3"><h5>Available Sizes</h></div>
<div class="col">
XS - S - M - L - XL - XXL - 3XL
</div>
</div> <!-- /row -->
</div> <!-- desc container -->
<br /><br />
<div class="container">
<div class="row">
<div class="col">
<?php
$sql = "SELECT * FROM colours WHERE product_id = '$product_id'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '
<div style="float:left; width:55px; text-align:center;">
<label class="container">
<img src="images/products/pakshots/'.$row["filename"].'" alt="'.$row["colour_name"].'" style="width:50px" onclick="myFunction(this);">
<br /><input type="radio" checked="checked" name="colour">
<span class="checkmark"></span>
</label>
</div>
';
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
</div>
</div>
</div>
</div> <!-- end of main content column -->
</div> <!-- end of main content row -->
</div> <!-- end of main container -->
<hr>
<div class="container">
<div class="row">
<div class="text-center col-md-6 col-12">
<h3>More Information</h3>
<p>If your not quite sure yet and would like to discuss further please either call us, request a call back, or get a quote on this product.</p>
<a class="btn btn-success btn-lg" href="#" role="button">GET QUOTE</a>
<a class="btn btn-danger btn-lg" href="#" role="button">REQUEST CALL BACK</a>
</div>
<div class="text-center col-md-6 col-12">
<h3>Loving it? Lets go!</h3>
<p>If you've made your choice and this is the top for you and yours, please select the colour you would like and click 'Choose this top'.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">REGISTER / LOGIN</a>
<a class="btn btn-info btn-lg" href="#" role="button">CHOOSE THIS TOP</a>
</div>
</div>
</div>
<br /><br />
<?php } ?>
<?php include 'footer.php'; ?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script>
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
function initMainImg() {
var img = document.getElementsByClassName("column_images")[0].childNodes[0];
myFunction(img);
}
</script>
</body>
</html>
我知道你已经问了好几个月了，因为我遇到了同样的问题，找到了(可能的(答案，所以我仍然想把它添加到这篇文章中。
在您的代码中，在<div class="row_images">之后和<div class="column_images">之前添加以下内容：
<img id="expandedImg" style="width: 100%" src="*location of your image*">
为我工作！p.s.您的图像的位置不应被复制，而是参考您的的图像