世界! 我是网络开发的新手，我现在写网页来弹出图片。 我想在从 usemap 区域调用它的 id 时激活 div，就像我的代码中的这个例子一样:
<div id="country">
<img src="a6.png" usemap="#workmapsouth" alt="South America map - Countries">
<map name="workmapsouth">
<area href="channels.html#ve" alt="Venezuela" title="Venezuela" coords="711,123,691,116,692,105,682,95,664,92,652,82,664,75,648,72,630,74,629,61,621,61,612,61,610,69,613,76,607,79,598,85,579,78,559,74,546,78,531,68,519,57,506,54,499,40,489,43,488,52,479,57,466,65,454,57,445,61,443,72,436,76,432,85,424,96,425,106,435,109,437,116,440,124,445,136,446,142,454,152,469,152,478,153,491,155,504,167,509,175,545,168,551,176,541,185,538,204,550,225,540,238,556,257,560,272,575,289,590,279,602,278,616,271,634,256,621,248,615,227,607,213,636,219,649,224,661,214,677,208,688,204,694,195,677,173,686,159,697,149,692,138" shape="poly">
<area href="channels.html#co" alt="Colombia" title="Colombia" coords="443,56,468,43,455,37,446,44,429,54,404,62,376,75,376,92,366,102,347,117,336,119,327,147,337,169,337,216,338,233,318,245,303,265,324,283,354,298,360,292,376,301,396,302,405,315,417,326,432,345,447,349,463,342,479,346,492,354,484,374,497,389,505,325,494,306,493,292,513,287,496,278,499,268,537,261,552,260,536,239,544,226,536,215,532,191,543,175,514,177,496,169,482,157,446,156,434,137,430,115,419,102,428,78" shape="poly">
<area href="channels.html#br" alt="Brazil" title="Brazil" coords="745,279,768,268,792,265,801,255,813,252,824,262,847,260,864,257,877,239,891,215,901,246,911,262,921,275,955,303,1033,338,1132,357,1232,413,1247,464,1228,502,1205,525,1156,600,1153,674,1140,708,1113,763,1084,790,1054,793,968,828,952,889,896,966,847,1019,853,1000,831,970,808,955,774,932,797,907,838,881,845,863,843,844,831,839,831,812,827,796,810,802,798,769,758,761,751,716,764,694,757,669,745,660,743,637,731,639,718,638,707,634,708,603,697,583,668,573,619,555,602,540,597,495,575,496,552,507,540,512,520,526,504,519,493,524,488,511,483,494,475,487,473,496,462,501,450,498,441,490,429,475,420,459,433,436,443,419,449,408,475,399,490,395,505,390,507,370,507,349,511,318,505,303,500,297,523,288,511,271,546,268,555,280,563,287,583,298,594,286,609,276,631,266,647,256,629,240,624,225,642,231,653,230,665,224,671,215,683,212,694,208,704,215,698,233,700,255,707,269,717,279,728,279" shape="poly">
<area href="channels.html#gu" alt="Guyana" title="Guyana" coords="779,257,761,230,752,211,752,198,763,193,769,177,757,164,740,155,729,133,716,123,702,136,701,147,697,156,687,169,690,185,703,190,713,206,710,223,709,239,714,258,726,270,740,271" shape="poly">
<area href="channels.html#su" alt="Suriname" title="Suriname" coords="794,257,794,248,816,247,823,249,830,233,830,218,823,203,829,187,830,175,794,178,773,177,769,193,757,201,756,211,764,229,779,254,785,257" shape="poly">
<area href="channels.html#frg" alt="French Guiana" title="French Guiana" coords="829,253,860,253,880,216,883,201,837,177,826,199,829,245" shape="poly">
<area href="channels.html#ar" alt="Argentina" title="Argentina" coords="617,785,622,770,648,772,667,796,687,810,731,827,755,841,746,851,741,866,732,883,742,886,760,889,783,889,803,885,818,874,827,850,835,850,835,868,829,878,809,891,798,897,783,911,771,927,755,940,746,955,745,975,744,983,742,991,737,1019,737,1042,762,1045,764,1065,779,1075,773,1096,763,1109,747,1120,729,1122,706,1129,662,1130,662,1141,659,1171,641,1180,623,1172,605,1171,600,1184,612,1198,629,1192,631,1203,631,1214,621,1212,614,1213,607,1220,597,1233,590,1254,568,1265,548,1280,551,1297,569,1299,583,1307,582,1333,558,1337,546,1350,538,1364,528,1413,532,1437,579,1464,595,1464,595,1472,576,1475,564,1476,553,1472,548,1481,538,1472,530,1465,525,1424,514,1411,501,1404,491,1405,459,1407,451,1398,452,1383,446,1372,436,1369,428,1366,428,1356,444,1344,452,1318,460,1303,466,1276,474,1257,475,1242,462,1238,458,1212,459,1176,463,1156,478,1128,478,1105,477,1087,488,1074,492,1061,490,1049,504,1036,504,1022,500,1001,491,973,498,953,504,924,510,909,522,886,536,877,530,850,535,833,544,823,563,804,562,788,572,778,581,771,592,772,603,777" shape="poly">
<area href="channels.html#ch" alt="Chile" title="Chile" coords="536,1486,482,1479,435,1460,409,1442,382,1402,371,1336,373,1295,383,1255,409,1174,425,1141,414,1100,438,1059,449,1029,335,999,332,973,455,951,464,919,482,848,491,695,505,679,526,717,523,733,532,753,537,770,545,788,557,790,551,810,533,820,530,830,526,843,528,867,528,879,515,887,505,902,497,921,492,948,483,967,488,984,500,1013,493,1029,483,1051,482,1074,469,1089,473,1114,471,1122,463,1140,456,1157,451,1174,454,1198,446,1203,453,1226,469,1250,462,1261,455,1282,453,1305,438,1320,445,1330,439,1339,422,1353,421,1370,434,1381,445,1381,446,1393,452,1406,460,1411,469,1410,486,1411,501,1410,521,1424,524,1450,522,1437,523,1466" shape="poly">
<area href="channels.html#bo" alt="Bolivia" title="Bolivia" coords="513,532,527,535,536,526,558,516,581,507,594,505,592,524,594,545,614,569,633,565,643,573,661,581,690,590,699,593,699,603,703,644,740,649,741,665,752,675,759,688,756,703,744,716,725,705,690,710,683,711,662,717,657,731,657,728,657,731,652,760,653,751,647,769,631,765,618,767,615,777,602,769,590,765,577,763,566,767,556,774,548,781,538,764,532,746,528,729,532,712,523,700,515,678,509,665,520,656,524,644,514,639,519,625,517,613,524,599,521,588,525,571,524,557,514,543" shape="poly">
<area href="channels.html#pa" alt="Paraguay" title="Paraguay" coords="661,781,653,769,659,757,656,742,668,725,679,719,694,715,713,710,729,711,739,720,748,732,752,744,752,760,748,766,756,769,764,772,772,775,785,772,796,774,801,796,806,811,821,809,830,814,826,826,825,836,821,851,819,864,798,882,780,887,756,880,737,880,750,852,759,842,745,828,723,818,705,811,690,805,671,794" shape="poly">
<area href="channels.html#ec" alt="Ecuador" title="Ecuador" coords="308,275,280,286,274,309,264,321,263,343,280,370,280,381,277,391,287,392,297,395,301,402,307,395,311,383,316,370,330,357,351,353,364,343,376,330,383,314,374,304,364,295,355,300,340,294,326,287,313,280" shape="poly">
<area href="channels.html#pe" alt="Peru" title="Peru" coords="380,303,400,315,412,327,424,341,434,353,455,348,473,352,489,356,480,373,491,387,481,385,468,392,449,396,431,408,424,428,421,445,407,456,423,481,449,511,469,512,478,504,482,534,507,532,519,569,515,601,511,623,507,640,515,648,501,666,500,675,496,684,485,687,466,675,384,631,359,596,257,427,253,396,264,374,271,372,272,386,272,397,299,404,307,401,315,384,320,372,338,362,353,358,366,348,375,337,383,329,388,314" shape="poly">
<area href="channels.html#ur" alt="Uruguay" title="Uruguay" coords="773,940,803,957,830,976,849,999,845,1013,844,1025,832,1038,818,1044,810,1045,788,1044,757,1036,742,1022,752,949" shape="poly">
<area href="channels.html#fai" alt="Falkland Islands" title="Falkland Islands" coords="678,1384,901,1453" shape="rect">
</map>
</div>
此处的 channel 文件包含带有我要调用的 ID 的 div，这是来自 channels.html 的一部分:
<html lang="en">
<head>
<title>
Story Behind a Picture
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="wwr.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<h2>venezuela</h2><br>
<div id="ve" class="row" style="width:100%" >
<div class="column">
<img src="ve1.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="ve2.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="ve3.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="ve4.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
<div class="column">
<img src="ve5.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(5)" class="hover-shadow">
</div>
<div class="column">
<img src="ve6.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(6)" class="hover-shadow">
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="ve1.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="ve2.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="ve3.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="ve4.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="ve5.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="ve6.jpg" style="width:100%; height: 600px;">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div style="width: 100%; background-color: black;" class="row">
<div class="column">
<img class="demo cursor" src="ve1.jpg" onclick="currentSlide(1)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="ve2.jpg" onclick="currentSlide(2)" style="width:100%; height: 250px;" alt="Barrio House Neighborhood">
</div>
<div class="column">
<img class="demo cursor" src="ve3.jpg" onclick="currentSlide(3)" style="width:100%; height: 250px;" alt="Sunset in Llanos - The Llanos is a vast tropical grassland plain situated to the east of the Andes in Colombia and Venezuela, in northwestern South America. It is an ecoregion of the tropical and subtropical grasslands, savannas, and shrublands biome.">
</div>
<div class="column">
<img class="demo cursor" src="ve4.jpg" onclick="currentSlide(4)" style="width:100%; height: 250px;" alt="Mérida is the quintessential touristic city in Venezuela, being one of the most sought-after destinations by national and international travelers.">
</div>
<div class="column">
<img class="demo cursor" src="ve5.jpg" onclick="currentSlide(5)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="ve6.jpg" onclick="currentSlide(6)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
</div>
</div>
</div>
</div>
<hr>
<h2>Colombia</h2><br>
<div id="co" class="row" style="width:100%">
<div class="column">
<img src="co1.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="co2.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="co3.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="co4.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
<div class="column">
<img src="co5.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(5)" class="hover-shadow">
</div>
<div class="column">
<img src="co6.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(6)" class="hover-shadow">
</div>
<div class="column">
<img src="co7.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(7)" class="hover-shadow">
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 7</div>
<img src="co1.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 7</div>
<img src="co2.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">3 / 7</div>
<img src="co3.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">4 / 7</div>
<img src="co4.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">5 / 7</div>
<img src="co5.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">6 / 7</div>
<img src="co6.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">7 / 7</div>
<img src="co7.jpg" style="width:100%; height: 600px;">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div style="width: 100%; background-color: black;" class="row">
<div class="column">
<img class="demo cursor" src="co1.jpg" onclick="currentSlide(1)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="co2.jpg" onclick="currentSlide(2)" style="width:100%; height: 250px;" alt="Barrio House Neighborhood">
</div>
<div class="column">
<img class="demo cursor" src="co3.jpg" onclick="currentSlide(3)" style="width:100%; height: 250px;" alt="Sunset in Llanos - The Llanos is a vast tropical grassland plain situated to the east of the Andes in Colombia and Venezuela, in northwestern South America. It is an ecoregion of the tropical and subtropical grasslands, savannas, and shrublands biome.">
</div>
<div class="column">
<img class="demo cursor" src="co4.jpg" onclick="currentSlide(4)" style="width:100%; height: 250px;" alt="Mérida is the quintessential touristic city in Venezuela, being one of the most sought-after destinations by national and international travelers.">
</div>
<div class="column">
<img class="demo cursor" src="co5.jpg" onclick="currentSlide(5)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="co6.jpg" onclick="currentSlide(6)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="co7.jpg" onclick="currentSlide(7)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
</div>
</div>
</div>
</div>
<hr>
<script src="wwr.js"></script>
</body>
</html>
当我调用这个 div active 时我需要这里，因为我的 javascript 代码对所有这些 div 使用一个 id 这是我的 javascript 从 div 中获取 id:
// Open the Modal
function openModal() {
document.getElementById("myModal").style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
有什么想法吗？？ 谢谢。
最佳答案
据我了解，您有两个页面 - 一个传递 id 的值，另一个显示使用该 id 的图像。如果是这样，这个脚本可能会有所帮助
window.onload = function () {
let url = window.location.href;
if (url.includes("#")){
[url, href] = url.split("#");
showDiv(href);
}
}
const divs = document.querySelectorAll('.divs');
function showDiv(href) {
divs.forEach(function(el) {el.style.display = "none";});
document.querySelector('#'+href).style.display = "block";
}
将 .divs 更改为您要显示的类。
这是它如何工作的演示</p>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
height: 100vh;
width: 100vw;
display: none;
}
#us {
background-color: red;
}
#uk {
background-color: green;
}
#aus {
background-color: yellow;
}
</style>
</head>
<body>
<a href='#us' class="as">Show Div1</a>
<a href='#uk' class="as">Show Div2</a>
<a href='#aus' class="as">Show Div3</a>
<div id="us" class="divs"></div>
<div id="uk" class="divs"></div>
<div id="aus" class="divs"></div>
</body>
<script>
window.onload = function () {
let url = window.location.href;
if (url.includes("#")){
[url, href] = url.split("#");
showDiv(href);
}
}
const as = document.querySelectorAll('.as');
const divs = document.querySelectorAll('.divs');
function showDiv(href) {
divs.forEach(function(el) {el.style.display = "none";});
document.querySelector('#'+href).style.display = "block";
}
as.forEach(el => el.addEventListener('click', event => {
let [url, href] = el.href.split("#");
showDiv(href);
}));
</script>
</html>关于javascript - 调用时激活 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64594135/