javascript - 调用 id 时的活动 div

Question

世界！我是网络开发的新手，我现在写网页来弹出图片。我想在从 usemap 区域调用 div 时激活 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>

此处的频道文件包含带有我要调用的 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()">&times;</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)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</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()">&times;</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)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</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 称为活动时，我需要这里只是因为我的 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;
}

有任何想法吗？？谢谢。

标签： javascripthtmlcssweb

Answer 1

据我了解，您有两个页面 - 一个传递 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为要显示的类。这是它如何工作的演示

<!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>